Knockout - 如何通过元素的 ID 绑定 observable？

Question

我正在构建一种机制来自动在表单字段中显示验证消息，并想讨论这个问题。

我有一个带有错误消息及其各自属性的可观察数组。

如何将可观察数组的元素绑定到其各自的表单字段？

observable 具有以下数据（即）：

messages = ko.observableArray();
- Property: Reference, Message: Already exists a product with this reference.
- Property: Name, Message: The product's name is mandatory.
- Property: Bar Code, Message: The Bars Code does not matches the EAN13 format.
- ...

我的表单字段的 ID 与数组中的属性名称相同：

        <div class="s13">
            <label for="Reference">Reference</label>
            <input class="text-box single-line" id="Reference" name="Reference" type="text" value="" data-bind="value: selected().Reference" />
            <span id="vReference"></span>
        </div>

        <div class="s13">
            <label for="Name">Name</label>
            <input class="text-box single-line" id="Name" name="Name" type="text" value="" data-bind="value: selected().Name" />
            <span id="vName"></span>
        </div>

        <div class="s13">
            <label for="BarCode">Bars Code (EAN13)</label>
            <input class="text-box single-line" id="BarCode" name="BarCode" type="text" value="" data-bind="value: selected().BarCode" />
            <span id="vBarCode"></span>
        </div>

我是 Knockout.js 的新手，但我认为我需要使用“计算的 observable”，它会为每个跨度返回相应的消息。

你说什么？

/// 更新 ////////////////////////////////// ////////////

产品视图模型：

function mainmodel(baseUri) {

var m = this;
    m.baseUri = baseUri;

/// PRODUCTS VIEW MODEL ******************************************* *

    m.products = new function () {

        var p = this;
            p.baseUri = baseUri;
            p.items = ko.observableArray();
            p.selected = ko.observable();
            p.messages = ko.observableArray([]);

产品加载中

        /// LIST
            p.list = function () {
                $.getJSON(p.baseUri + "/list" + "?page=" + p.currentpage(), p.items);
            }

产品创建（加载验证消息的位置）

        /// CREATE
            p.create = function (formElement) {
                //$.post(p.baseUri + "/create", $(formElement).serialize(), null, "json")
                $.ajax({
                    type: 'POST',
                    url: p.baseUri + "/create",
                    data: $(formElement).serialize(),
                    success: null,
                    dataType: "json",
                    statusCode: {
                        400: function (o) {
                            p.messages($.parseJSON(o.responseText));
                        }
                    }
                });
            }

运行此程序，p.messages 包含每个产品属性的验证消息。

Answer 1

我认为有几种方法可以用于这个。如果您从对服务器的请求中接收到这些验证消息，那么您可以遍历它们并根据结果直接填充 observables。

一个很好的方法是创建一个“sub” observable 来保存验证消息，例如：

this.myObservable = ko.observable();
this.myObservable.validationMessage = ko.observable();

现在您可以绑定myObservable 和myObservable.validationMessage。

因此，如果您收到返回的消息数组，您可以遍历它们并应用如下消息：

        var messages = [
            { Property: "Reference", Message: "Can't find a reference to this reference" },
            { Property: "Name", Message: "Pick a better name" },
            { Property: "BarCode", Message: "Not a valid code" }
        ];

        //apply messages to each observable
        ko.utils.arrayForEach(messages, function(message) {
            if (ko.isObservable(self[message.Property])) {
               self[message.Property].error(message.Message);  
            }
        });

我不知道您的应用程序流程，但您可能想先清除错误。

这是一个示例：http://jsfiddle.net/rniemeyer/mk2Ed/

这是一个使用计算出的 observables 的替代方案（第一个会稍微高效一些）：http://jsfiddle.net/rniemeyer/R6mL8/