1

我找到了这个，但这对我不起作用：绑定到简单的字符串数组

我只是想通过淘汰赛来管理一系列字符串。这是我的标记：

<div class="editor-field">
        <table>
            <thead>
                <tr>
                    <th>Page Urls</th>
                    <th></th>
                </tr>
            </thead>
            <!-- ko if: RouteUrls().length > 0 -->
            <tbody data-bind="foreach: RouteUrls">                   
                <tr>
                    <td><span data-bind="text: $data"></span></td>
                    <td><a href="#" class="ui-icon ui-icon-closethick" data-bind="click: $root.removeUrl">Remove</a></td>
                </tr>
            </tbody>
            <!-- /ko -->
            <!-- ko if: RouteUrls().length < 1 -->
            <tbody>
                <tr>    
                    <td colspan="3"> No urls added for editing.</td>
                </tr>
            </tbody>
            <!-- /ko -->
        </table>
        @Html.HiddenFor(x => x.UrlCount, new { data_bind = "value:RouteUrls().length" })
        @Html.ValidationMessageFor(x => x.UrlCount)
    </div>

这是我的淘汰赛代码：

    <script type="text/javascript">
    var mappedModel = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model)));
    mappedModel.RouteUrls = ko.observableArray([]);
    mappedModel.urlToAdd = ko.observable("/");
    mappedModel.addUrl = function() {
        var duplicateValues = ko.utils.arrayFilter(this.RouteUrls(), function (item) {
                return item == mappedModel.urlToAdd();                   
        });

        if ((this.urlToAdd() != "") && (duplicateValues.length == 0)) // Prevent blanks and duplicates
        {

            this.RouteUrls().push(this.urlToAdd());
            this.urlToAdd("/");
            console.log(this.RouteUrls().length);
            console.log(this.RouteUrls());
        }
    };
    mappedModel.removeUrl = function(url) {
        mappedModel.RouteUrls.remove(url);
    };

    //other code...

    ko.applyBindings(mappedModel);

    $.validator.unobtrusive.parse("#pageCForm");
    $("#pageForm").data("validator").settings.submitHandler = mappedModel.save;
</script>

现在的问题是，在我的标记中，该集合从未显示。当我尝试添加一个 url 时，即使我删除了有条件的淘汰赛并只显示表格，它也总是空的。如果我尝试提交页面，我会在 URL 计数的隐藏字段上运行不显眼的验证，并且它也像空的一样。因此，标记中的所有内容都表现得RouteUrls()总是空的。但是，当我将 RouteUrls().length 和文本记录到控制台时，我在连续尝试添加后得到以下信息：

1 
["/sdfsd"] 
2 
["/sdfsd", "/trgfd"] 
3 
["/sdfsd", "/trgfd", "/fdfdggdbjn"]

所以我不明白如何在脚本代码中正确填充长度和数组，但它没有反映在标记中。有什么帮助吗？

4

1 回答 1

3

问题（可能）在这条线上：

this.RouteUrls().push(this.urlToAdd());

Knockout 重新定义了 ObservableArray 中的推送（以及所有其他更改数组的方法）。这些 ObservableArray 方法将改变数组然后触发观察者。

因此，您应该将其替换为：

this.RouteUrls.push(this.urlToAdd());

更多信息在这里： http: //knockoutjs.com/documentation/observableArrays.html#manipulating_an_observablearray

于 2013-01-16T18:37:02.290 回答