3

所以我有一个自定义的淘汰赛绑定来处理持续时间。我有一个问题，我的一个表单中的值可能是持续时间，但也可能是字符串或其他值。问题源于持续时间值表示为具有两个属性的对象，持续时间和 time_unit （它本身就是一个具有 2 个属性的对象。我在 if 绑定中绑定了各种绑定节点。

init: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {

    var allBindings = ko.toJS(allBindingsAccessor() || {}),
        source = allBindings.source || [],
        observable = valueAccessor(),
        value = ko.toJS(ko.utils.unwrapObservable(observable)),

        duration = new DurationControl({
            inputNode: inputNode,
            source: source,
            defaultValue: value
        });

    //attach duration control to element and render here

    ko.utils.registerEventHandler(inputNode.getDOMNode(), 'blur', function () {
        var observable = valueAccessor();

        if (!observable.viewModelUpdating) {
            observable.viewModelUpdating = ko.observable(false);
        }

        if (duration.isValueValid(true)) {
            observable.viewModelUpdating(true);
            observable.duration(duration.getDuration());
            observable.time_unit.value(duration.getTimeUnit());
            observable.time_unit.id(sourceIdValueMap[duration.getTimeUnit()] || 0);
            observable.viewModelUpdating(false);
        }
    });
}

还有我绑定的 html

<!-- ko if: type() == 'string' -->
<div class="control wide">
    <input type="text" data-bind="value: value" />
</div>
<!-- /ko -->

<!-- ko if: type() == 'duration' -->
<div class="control">
   <input type="text" data-bind="duration: value, source: metadata.time_units" />
</div>
<!-- /ko -->

如果我使用 value 进行初始绑定是正确的对象格式，就像这样

...,
value: {
    duration: '',
    time_unit: {
        value: '',
        id: '',
    }
},
...

一切都很好。但是，如果我从其他格式的值开始，例如..., value: 'nada', ...尝试访问 observable.duration （和 observable.time_unit.*）时会中断。

当我用正确的设置评估价值时，我把上面描述的对象拿回来。如果我尝试手动将 duration/time_unit 属性添加为 observables，我仍然只是将空字符串取出。

我如何最好地从我的 init 函数内部更新视图模型/绑定/等，以便它的行为就像我初始化模型时最初处于该状态一样？

4

1 回答 1

2

自定义绑定不能解决您的问题。Knockout 将绑定它在 DOM 中遇到的所有内容，因此无论您使用哪种类型的对象初始化值，另一种都将失败。我已经实现了类似的东西，其中我的视图模型中的可观察对象存储了多种“类型”的对象，您需要将 UI 的“类型特定”部分绑定到每个对象。这就是我解决问题的方式：

删除所有实例，if: type() == '<type>'并将每段 HTML 实现为模板。

现在重构这个决策过程。使用计算出的 observable来决定基于type(). 像这样的东西...

function ViewModel(){
    var self = this;

    self.type = ko.observable();
    self.value = ko.observable();

    self.currentValueTemplate = ko.computed(function(){
       switch(self.type()) {
           case 'string':
               return 'stringTemplate';

           case 'duration':
               return 'durationTemplate';

           default:
               throw 'invalid type';
       }
    });

现在只需添加一个模板占位符...

<!-- ko template: { name: currentValueTemplate, data: value } -->
<!-- /ko -->

您可能希望对其进行调整以适应您的应用程序的具体情况，但它是一种更整洁的方法，并且如果您想要存储越来越多的对象类型，它将可以更好地扩展。

于 2013-11-07T10:13:24.327 回答