javascript - 如何避免在数据绑定(bind)下拉列表初始化时触发订阅？

Question

我想找到避免可观察订阅在页面启动时触发的最佳实践。

问题:

当您遇到类似下面描述的示例时，启动时将显示警报，这是不需要的:

foo.someProperty = ko.observable(null);
foo.someProperty.subscribe(function () { alert(foo.someProperty()); });

不方便的解决方案:

到目前为止，我一直在使用以下解决方案:

foo.someProperty.subscribe(function () {
  if (TriggersEnabled()) { alert(foo.someProperty()) };
});

TriggersEnabled 检查可避免回调执行，但此解决方案需要创建 TriggersEnabled 属性。此外，必须在启动前将其设置为 false，在完成页面加载后将其设置为 true。

问题

我可以避免这种情况吗？还有其他方法可以达到相同的结果吗？

Answer 1

根据您提供的 fiddle ，事件正在触发，因为您绑定(bind)到选择元素的默认值不是列表中的值。因此，当选择列表显示时，它会更改绑定(bind)到第一个选项的可观察值的值。

解决此问题的一种方法是确保绑定(bind)到 select 元素的可观察值的默认值是有效值。

示例:

var page = new PageVM();

function PageVM () {
    
    var vm = this;
    
    vm.someProperty = ko.observable(''); //Provide a default value that will be in the select list
    
    vm.someProperty.subscribe(function () { alert(vm.someProperty()); });
};

ko.applyBindings(page);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
foo.someProperty
<select data-bind="value: someProperty">
    <!-- make sure the first option matches the default value of someProperty -->
    <option value="">Select...</option>
    <option value="01">Option 01</option>
    <option value="02">Option 02</option>
</select>