Question

我发现了这一点，但这对我不起作用：Bind to simple array of strings

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

<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（）。长度和文本记录到控制台时，我在连续尝试添加后得到以下内容：

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

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

Answer 1

问题是（可能）在这一行：

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

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

所以你应该用以下代码替换它：

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

此处有更多信息： http://knockoutjs.com/documentation/observableArrays.html#manipulating_an_observablearray

通过一系列字符串敲除foreach迭代

1 个答案: