Knockout.js 淘汰：未定义viewModel

当使用作为参考来构建包含可组织内容的网格时，我遇到了一个问题。错误消息显示

错误：未定义viewModel

由于my

viewModel

是在JS的第一行定义的，因此它通常应该像示例中那样工作。它可能与从模板中请求

viewModel

有关

在检查其他答案时，它们都太笼统了。我没有找到一个能解决我问题的答案

完整错误：

Uncaught ReferenceError: Unable to process binding "template: function (){return { name:'gridTmpl',foreach:gridItems,templateOptions:{ parentList:gridItems}} }"
Message: Unable to process binding "template: function (){return { name:'rowTmpl',foreach:rowItems,templateOptions:{ parentList:rowItems}} }"
Message: Unable to process binding "visible: function (){return $data !== viewModel.selectedRowItem() }"
Message: viewModel is not defined

var viewModel={
gridItems:ko.array(
[{
“行项目”：[{
“名称”：“项目1”
}, {
“名称”：“第2项”
}, {
“名称”：“第3项”
}]
}, {
“行项目”：[{
“名称”：“第4项”
}]
}, {
“行项目”：[{
“名称”：“第5项”
}, {
“名称”：“第6项”
}]
}]
),
selectedRowItem:ko.observable（），
选择行项目：函数（行项目）{
此.selectedRowItem（rowItem）；
}
};
//将项目与可观察的耳环连接起来
ko.bindingHandlers.sortableList={
init:function（元素、valueAccessor、allBindingsAccessor、上下文）{
$（element）.data（“sortList”，valueAccessor（））；//附加元数据
$（元素）。可排序({
更新：功能（事件、用户界面）{
var item=ui.item.data（“sortItem”）；
如果（项目）{
//识别父母
var originalParent=ui.item.data（“父列表”）；
var newParent=ui.item.parent（）.data（“sortList”）；
//找出它的新位置
var position=ko.utils.arrayIndexOf（ui.item.parent（）.children（），ui.item[0]）；
如果（位置>=0）{
原始客户。删除（项目）；
新父接头（位置，0，项目）；
}
ui.item.remove（）；
}
},
连接方式：'.container'
});
}
};
//附加元数据
ko.bindingHandlers.sortableItem={
init：函数（元素、值访问器）{
var options=valueAccessor（）；
$（元素）.data（“sortItem”，options.item）；
$（元素）.data（“父列表”，选项.parentList）；
}
};
//控制可见性，指定元素焦点，并选择内容（按顺序）
ko.bindingHandlers.visibleAndSelect={
更新：函数（元素、值访问器）{
bindingHandlers.visible.update（元素，valueAccessor）；
if（valueAccessor（））{
setTimeout（函数（）{
$（元素）.focus（）.select（）；
}，0）；//新的行项尚未在DOM中
}
}
}
应用绑定（视图模型）
.sortable{
列表样式类型：无；
保证金：0；
填充：0；
宽度：60%；
}
李先生{
保证金：0 3px 3px 3px；
填充：0.4em；
左侧填充：1.5em；
字号：1.4em；
高度：18px；
光标：移动；
}
.可排序的li span{
位置：绝对位置；
左边距：-1.3em；
}
.可排序的李{
游标：默认值；
颜色：#9595；
不透明度：0.5；
}
.可排序网格{
宽度：100%！重要；
}
.可排序行{
身高：100%！重要；
填充：0！重要；
边距：0！重要；
显示：块！重要；
}
.可排序项目{
边框：1px纯黑；
}





应用绑定时需要实例化viewmodel，否则不会调用构造函数。这就是为什么它需要是一个函数，而不是一个对象

ko.applyBindings(new viewModel());

以下是必须更改viewModel的方式：

var viewModel = function() {
    var self = this;

    self.gridItems= ko.observableArray(
        [{
          "rowItems": [{
            "name": "Item 1"
           }, {
            "name": "Item 2"
           }, {
            "name": "Item 3"
           }
          ]
       }, {
          "rowItems": [{
            "name": "Item 4"
          }]
       }, {
          "rowItems": [{
            "name": "Item 5"
          }, {
            "name": "Item 6"
          }]
       }]
    );
    self.selectedRowItem = ko.observable();
    self.selectRowItem = function(rowItem) {
        this.selectedRowItem(rowItem);
    };
};

Viewmodel属性不能在Viewmodel外部更改或读取。要访问viewmodel中的属性，不能使用
viewmodel
，因为它在KO绑定上下文中是未知的。您无法访问那些前缀为
$root
：

<script id="rowTmpl" type="text/html">
  <td class="item" data-bind="sortableItem: { item: $data, parentList: $data.parentList }">
    <a href="#" data-bind="text: name, click: function() { $root.selectRowItem($data); }, visible: $data !== $root.selectedRowItem()"></a>
    <input data-bind="value: name, visibleAndSelect: $data === $root.selectedRowItem()" />
  </td>
</script>

应用绑定时需要实例化viewmodel，否则不会调用构造函数。这就是为什么它需要是一个函数，而不是一个对象

ko.applyBindings(new viewModel());

以下是必须更改viewModel的方式：

var viewModel = function() {
    var self = this;

    self.gridItems= ko.observableArray(
        [{
          "rowItems": [{
            "name": "Item 1"
           }, {
            "name": "Item 2"
           }, {
            "name": "Item 3"
           }
          ]
       }, {
          "rowItems": [{
            "name": "Item 4"
          }]
       }, {
          "rowItems": [{
            "name": "Item 5"
          }, {
            "name": "Item 6"
          }]
       }]
    );
    self.selectedRowItem = ko.observable();
    self.selectRowItem = function(rowItem) {
        this.selectedRowItem(rowItem);
    };
};

Viewmodel属性不能在Viewmodel外部更改或读取。要访问viewmodel中的属性，不能使用
viewmodel
，因为它在KO绑定上下文中是未知的。您无法访问那些前缀为
$root
：

<script id="rowTmpl" type="text/html">
  <td class="item" data-bind="sortableItem: { item: $data, parentList: $data.parentList }">
    <a href="#" data-bind="text: name, click: function() { $root.selectRowItem($data); }, visible: $data !== $root.selectedRowItem()"></a>
    <input data-bind="value: name, visibleAndSelect: $data === $root.selectedRowItem()" />
  </td>
</script>

viewModel
未在您的viewModel中定义。调用
ko.applyBindings（viewModel）时
名称
viewModel
不会带入绑定引用中使用；我想你想要的是
$root
。您应该能够做到：

  <td class="item" data-bind="sortableItem: { item: $data, parentList: $item.parentList }">
    <a href="#" data-bind="text: name, click: function() { $root.selectRowItem($data); }, visible: $data !== $root.selectedRowItem()"></a>
    <input data-bind="value: name, visibleAndSelect: $data === $root.selectedRowItem()" />
  </td>

viewModel
未在您的viewModel中定义。调用
ko.applyBindings（viewModel）时
名称
viewModel
不会带入绑定引用中使用；我想你想要的是
$root
。您应该能够做到：

  <td class="item" data-bind="sortableItem: { item: $data, parentList: $item.parentList }">
    <a href="#" data-bind="text: name, click: function() { $root.selectRowItem($data); }, visible: $data !== $root.selectedRowItem()"></a>
    <input data-bind="value: name, visibleAndSelect: $data === $root.selectedRowItem()" />
  </td>


在绑定
viewmodel
时，在错误消息中出现
viewmodel
。您能否在代码中搜索
viewmodel
？很抱歉，复制错误时出错。最初的错误消息是
viewModel
。另外，您的viewModel方法
selectRowItem:function（rowItem）{this.selectedRowItem（rowItem）；}
是多余的。只需使用
单击：$root.selectedRowItem
。在绑定
viewmodel
时，在错误消息中出现
viewmodel
。您能否在代码中搜索
viewmodel
？很抱歉，复制错误时出错。最初的错误消息是
viewModel
。另外，您的viewModel方法
selectRowItem:function（rowItem）{this.selectedRowItem（rowItem）；}
是多余的。只需使用
单击：$root.selectedRowItem
。这通常会有所帮助，但在这种情况下会出现另一个错误