1

我有来自我设置的 JSFiddle 的以下代码：https ://jsfiddle.net/ktce56hr/2/

var RootViewModel = function() {
    var self = this;
    this.rootText = ko.observable('default text');
    this.rootFunc = function() {
        alert("root func!");
    };
}

ko.components.register('root', {
    viewModel: function(model) {
        var self = this;
        this.rootViewModel = model;
        this.title = ko.observable('default title');
    },
    template: { element: 'root_template' }
});

$(function () {
    ko.applyBindings(new RootViewModel());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

<div data-bind="component: { name: 'root', params: { model: $root } }"></div>

<script id="root_template" type="text/html">
    <div>
        <span data-bind="text: title"></div>
        <div data-bind="with: rootViewModel">
            <input type="text" data-bind="value: rootText" />
            <button data-bind="click: rootFunc">Go</button>
        </div>
    </div>
</script>

运行此代码时，我收到以下错误：

Uncaught ReferenceError: Unable to process binding "with: function (){return rootViewModel }"
Message: Unable to process binding "value: function (){return rootText }"
Message: rootText is not defined

有人可以解释为什么我不能在组件视图模型上使用“rootViewModel”属性设置绑定上下文吗？

4

1 回答 1

1

您正在声明组件实例，如下所示：

<div data-bind="component: { name: 'root', params: { model: $root } }"></div>

params将是 viewmodel 构造函数的第一个参数。对于 viewmodel 构造函数，它看起来像这样：

"model": {
  "rootText": "default text"
}

它返回的视图模型将是这样的：

{
  "rootViewModel": {
    "model": {
      "rootText": "default text"
    }
  },
  "title": "default title"
}

当然，title在您的视图中访问是有效的。但里面with: rootViewModel不会包含rootText.

修复很简单：

<div data-bind="component: { name: 'root', params: $root }"></div>


var RootViewModel = function() {
    var self = this;
    this.rootText = ko.observable('default text');
    this.rootFunc = function() {
        alert("root func!");
    };
}

ko.components.register('root', {
    viewModel: function(model) {
        var self = this;
        this.rootViewModel = model;
        this.title = ko.observable('default title');
    },
    template: { element: 'root_template' }
});

$(function () {
    ko.applyBindings(new RootViewModel());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

<div data-bind="component: { name: 'root', params: $root }"></div>

<script id="root_template" type="text/html">
    <div>
        <span data-bind="text: title"></div>
        <div data-bind="with: rootViewModel">
            <input type="text" data-bind="value: rootText" />
            <button data-bind="click: rootFunc">Go</button>
        </div>
    </div>
</script>

PS：还有一个类似的问题rootFunc，但我相信你可以解决这个问题。

于 2015-11-11T06:21:41.413 回答