regularjs/regular

关于watch中的stable参数解决死循环的问题?

Closed this issue · 4 comments

config:function(){
					this.$watch('vList', function(newValue, oldValue) {
			        	if(newValue){
			        		newValue = newValue.sort(function(a, b) {
			                    return a.ording > b.ording;
			                });
			        	}
			        },{stable: true});
				}

在没有参数 stable 之前,vList 超过10条记录 会循环依赖不断触发watch,加了就好了。“稳定“是什么含义?加了stable以后,watch 中的赋值就不会再次触发watch 直到稳定状态?
第二个问题,早在watch 里面改变另一个对象的值,加了stable 会触发另一个对象的watch吗?

将watcher目前分为stable 和 非stable 两类。 stable的意义是 这个watch回调不会修改别的依赖数据。这样regular会将其放置到最后进行处理。 事实上大部分内部增加的watcher比如插值 directive等都是stable的,其实也大大增加了运行性能。

不加stable 为啥超过10条会死循环啊,没啥特别的啊,加了stable 之后出现奇怪问题,触发this.xxx 事件失败,但是会调用 watch("vList")

<script type="text/tpl" id="attrTpl">
		<form  class="form-horizontal col-md-8">
			<input type="hidden" name="id">
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="siteName"> 属性名称: </label>
                <div class="col-sm-9">
                    <input type="text" r-model={name} class="col-xs-10 col-sm-7"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="siteType"> 属性描述: </label>

                <div class="col-sm-9">
                     <textarea r-model={remark} class="col-xs-10 col-sm-7"></textarea>
                </div>
            </div>
			{#list vList as v}
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="siteType"> 属性值: </label>
                <div class="col-sm-9">
                     <input type="text" r-model={v.attributeValue} class="col-xs-10 col-sm-7"/>
                     <i class="ace-icon glyphicon glyphicon-download value-op" on-click={this.orderDown(v_index)}></i>
                     <i class="ace-icon glyphicon glyphicon-upload value-op" on-click={this.orderUp(v_index)}></i>
                     <i class="ace-icon glyphicon glyphicon-trash value-op" on-click={this.valueDel(v_index)}></i>
                </div>
            </div>
			{/list}
			<div class="clearfix form-actions">
				<div class="col-md-offset-3 col-md-9">
					<button class="btn btn-info" type="button" id="submitBtn">
						<i class="ace-icon fa fa-check bigger-110"></i>提交
					</button>
					&nbsp; &nbsp; &nbsp;
					<button class="btn" type="button" id="cancelBtn">
						<i class="ace-icon fa fa-undo bigger-110"></i> 取消
					</button>
				</div>
			</div>
		</form>
</script>
var attrFormComponent = new Regular({
				template: '#attrTpl',
				config:function(){
					this.$watch('vList', function(newValue, oldValue) {
			        	if(newValue){
			        		newValue = newValue.sort(function(a, b) {
			                    return a.ording > b.ording;
			                },{stable:true});
			        		this.data.testname="123";
			        	}
			        });
					this.$watch('testname', function(newValue, oldValue) {
						console.log(newValue);
			        });
				},
				init:function(){
					
				},
				data:{
					
				},
				orderDown:function(index){
					console.log(this.data.testname);
				},
				orderUp:function(index){
					
				},
				valueDel:function(index){
					
				}
			});
			attrFormComponent.$inject('#attrForm');

$("#listBody").on("click", ".js_attr_edit", function() {
				var _that = $(this);
				var id = _that.data("id");
				postJSON("${rc.contextPath}/p/attr/goedit", {id:id}, function(data) {
					if (data.result == "true") {
						attrFormComponent.data=data.value;
						attrFormComponent.$update();
						s.next();
					} else {
						showError("保存失败!");
					}
				});
			});

data 动态取的,我一触发this.orderDown() 就会进入到vList的watch 好奇怪

看下,是不是你sort处理,导致list没稳定下来 。regular会处理到数据不再更改,你这种应该不属于stable,但是可能你watch回调里改变的数据没稳定下来 .http://regularjs.github.io/guide/zh/advanced/dirty.html 看下脏检查的定义

newValue = newValue.sort(function(a, b) {
    return a.ording - b.ording;
});

试试,用大于不一定能稳定下来。