2

我正在尝试使用 knockout.js 在服务器端属性上执行添加/删除操作。这是我的 C# 模型的样子：

public class MyModel
{
    [Key]
    public int MyModelId { get; set; }

    [Required]
    public string Name { get; set; }

    private IEnumerable<string> _Items;

    [Required]
    public IEnumerable<string> Items
    {
        get { return _Items; }
        set { _Items = value; }
    }

    //Used to store in SQL database
    public string ItemsSQL
    {
        get { return _Items != null ? String.Join(";", _Items) : null; }
        set { _Items = value != null ? value.Split(';').ToList() : null; }
    }
}

这是我的 ViewModel 的样子：

@model MyProject.Models.MyModel

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script type="text/javascript">
    @{
        var initialData = new JavaScriptSerializer().Serialize(Model);
    }
    var viewModel = {
        MyModel: ko.observable(@Html.Raw(initialData)),

        //Commented out on purpose
        //Items: ko.observableArray(this.MyModel.Items),

        addItem: function() { 
            this.MyModel.Items.push("");
        },

        removeItem: function(item) {
            this.MyModel.Items.remove(item);
        },
    };

    alert(JSON.stringify(@Html.Raw(initialData)));

    $(document).ready(function() {ko.applyBindings(viewModel); });
</script>

这是我的观点：

Name: <span data-bind="text: MyModel().Name"></span>
<br />
Items: <button data-bind="click: addItem">Add Item</button>

<table>
    <tbody data-bind="template: { name: 'itemTemplate', foreach: MyModel().Items}"></tbody>
</table>

<script type="text/html" id="itemTemplate">
    <tr>
        <td>
            <input data-bind="value: $data" />
            <a href="#" data-bind="click: function() { 
                                   viewModel.removeItem($data) }">Remove Item</a>
        </td>
    </tr>
</script>

这与显示在文本框中MyModel.Name的每个项目一起MyModel.Items显示。我的问题是当我尝试实例化时Items，它会吐出错误消息： Unable to get value of the property 'Items': object is null or undefined. 这也会影响我的添加和删除操作。

更新

当我这样做时alert(JSON.stringify(this.MyModel));，它显示 MyModel 未定义，但是当我这样做时，alert(JSON.stringify(@Html.Raw(initialData)));我的模型以 JSON 格式显示。所以，我的模型正确序列化，但淘汰赛无法从 C# 变量创建可观察的属性？我不知道。剃须刀是一种痛苦。

4

2 回答 2

5

ViewModel 应按如下方式构造：

@{
    var initialData = new JavaScriptSerializer().Serialize(Model);
}
var data = @Html.Raw(initialData);
function ViewModel(data) {
    var self = this;
    self.Name = ko.observable(data.Name);
    self.Items = ko.observableArray(data.Items);
    self.addItem = function() { self.Items.push(""); };
    self.removeItem = function(data) { self.Items.remove(data); }
}
$(document).ready(function() {ko.applyBindings(new ViewModel(data)); });
于 2012-08-30T15:46:33.353 回答
2

我认为这initialData是一个 C# 变量，但您正试图通过 javascript 来提醒它。

这有点令人困惑，因为很难说出剃须刀是如何处理内脏var 的@{ }

如果要对其进行字符串化，则必须先将其放入 javascript 变量中。就像是：

var jsInitialData = @{Html.Raw(initialData)}

Razor 在 javascript 块中有点麻烦，所以它不能完全工作，但我怀疑你需要一些类似的东西。

于 2012-08-29T15:46:08.050 回答