javascript - 组件参数未更新

Question

由于某种原因，我的组件中的参数似乎没有改变。如果我订阅可观察的问题就可以解决，但我觉得一定是其他地方出了问题，而且我无法弄清楚。

我在自己的文件中拥有模板和 viewModel。

这是我的 View 模型:

function model(params){
    var viewModel = {};
    viewModel.foo = ko.observable();
    params.value.subscribe(function(data){
        viewModel.foo(data);
    });
    return viewModel;
}

这是我的模板:

function template(){
    var template =`<div data-bind="text: foo></div>`;
    return template;
}

这是我注册的地方。

ko.components.register('foo-template', {
    viewModel: { createViewModel: model },
    template: template()
});

这是我在 HTML 中使用它的地方。 Foo 将是主视图模型中的 decared observable。

<foo-template params="value: foo"></foo-template>

如果我订阅params.value，一切都会正常，但我觉得我不需要使用它。

Answer 1

我认为问题在于您试图将数据绑定(bind)到 div。 Div 通常不支持可写文本，并且文本绑定(bind)不能很好地与它们配合。如果您将模板中的 div 替换为标准输入文本框，一切似乎都会按预期工作。

ko.components.register('foo-template', {
    viewModel: { createViewModel: model },
    template: template()
});

function model(params){
    var viewModel = {};
    viewModel.foo = params.value;
    //viewModel.foo = ko.observable('internal value');
    return viewModel;
}

function template(){
    var template =`Internal foo: <input type="text" data-bind="textInput: foo"></input>`;
    return template;
}

ko.applyBindings({foo: ko.observable('test')});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div>
  <foo-template params="value: foo"></foo-template>
  <br />
  External foo: <span data-bind="text: ko.toJSON(foo)"></span>
</div>