Knockoutjs 和绑定答案

【问题标题】：Knockoutjs and bindingKnockoutjs 和绑定
【发布时间】：2013-07-01 10:41:41
【问题描述】：

Knockuoutjs 和绑定让我快疯了：

我已经定义了一个 CreateEditGroup.js 文档，并且我已经创建了方法和 Collection 来检索或更新我的应用程序中的组：

var url = window.location.pathname;
var GroupID = url.substring(url.lastIndexOf('/') + 1);


var Group = function (group)
{
    var self = this;
    self.GroupID = ko.observable(group ? group.GroupID : 0).extend({ required: true });
    self.Name = ko.observable(group ? group.Name : '').extend({ required: true });
};

var GroupCollection = function () {
    var self = this;
    if (GroupID == 0) {
        self.group = ko.observable(new Group());
    }
    else {
        $.ajax({
            url: '/Group/GetGroupByID/' + GroupID,
            async: false,
            dataType: 'json',
            success: function (json) {
                self.group = ko.observable(new Group(json));
            }
        });
    }

    self.backToGroupList = function () { window.location.href = '/App/Groups' };

    //Aggiunta o modifica

    self.saveGroup = function () {
        $.ajax({
            type: (self.group().GroupID > 0 ? 'PUT' : 'POST'),
            cache: false,
            dataType: 'json',
            url: urlContact + (self.group().GroupID > 0 ? '/UpdateGroup?id=' + self.group().GroupID : '/SaveGroup'),
            data: JSON.stringify(ko.toJS(self.group())),
            contentType: 'application/json; charset=utf-8',
            async: false,
            success: function (data) {
                window.location.href = '/App/Groups';
            },
            error: function (err) {
                var err = JSON.parse(err.responseText);
                var errors = "";
                for (var key in err) {
                    if (err.hasOwnProperty(key)) {
                        errors += key.replace("group.", "") + " : " + err[key];
                    }
                }
                $("<div></div>").html(errors).dialog({ modal: true, title: JSON.parse(err.responseText).Message, buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
            },
            complete: function () {
            }
        });
    };

};

ko.applyBindings(new GroupCollection());

显示表单的视图有这个 HTML 代码：

@{
    ViewBag.Title = "CreateEditGroup";
}

<h2>Nuovo gruppo</h2>
<table class="table">
    <tr>
        <th colspan="1">

        </th>
    </tr>
    <tr></tr>
    <tbody data-bind="with: Group">
        <tr>
            <td>
                <input class="input-large" data-bind="value: Name" placeholder="Nome" />
            </td>
        </tr>
    </tbody>
</table>

<button class="btn btn-small btn-success" data-bind="click: saveGroup">Salva</button>
<input class="btn btn-small btn-primary" type="button" value="Annulla" data-bind="click: $root.backToGroupList" />

<script src="@Url.Content("~/Repository/CreateEditGroup.js")"></script>

每次加载 CreateEditGroup 页面时，我都会收到无法绑定 Name 属性的消息，但代码看起来不错。

请帮帮我。

代码错误：

An unhandled exception occurred at line 1936 column 17 in http://localhost:2297/Scripts/knockout-2.2.1.debug.js

0x800a139e - Run-time JavaScript: Unable to parse bindings.

Message: ReferenceError: 'Name' is not defined;

Bindings value: value: Name

【问题讨论】：

请发布确切的错误信息！
在你的样本中你没有data-bind="with: Name"！你只有data-bind="with: Group" 和data-bind="value: Name" 所以你的样本和错误不匹配！
我已经添加了错误代码:)
我已经发布了正确的错误！我做了一些测试，我发布了错误消息！对不起！
OP 已经在 cmets 中提到这个问题现在已经过时了。

标签： asp.net-mvc knockout.js knockout-2.0

【解决方案1】：

我相信你有一个大写错误。

data-bind="with : Group"

应该是

data-bind="with : group"

【讨论】：

它说“组”是未定义的:(

【解决方案2】：

我已经解决了这个难题！错误很简单：在 CreateEditGroup.js 中，我声明了一个名为 Group 的变量和一个名为 group 的对象

var Group = function (group)
{
    var self = this;
    self.GroupID = ko.observable(gruppo ? gruppo.GroupID : 0).extend({ required: true });
    self.Name = ko.observable(gruppo ? gruppo.Name : '').extend({ required: true });
};

我把这个函数中传入的对象的名字改成别的名字，终于可以了！

var Group = function (gruppo)
{
    var self = this;
    self.GroupID = ko.observable(gruppo ? gruppo.GroupID : 0).extend({ required: true });
    self.Name = ko.observable(gruppo ? gruppo.Name : '').extend({ required: true });
};

谢谢大家的帮助！

【讨论】：