使用 KnockoutJS 从 DOM 元素中读取内容

Question

目标

使用 KnockoutJS 从 DOM 元素中读取内容。

问题

我的 HTML 中有一个产品列表。代码是这样的：

<li>
    <div class="introduction">
        <h3>@Model["ProductName"]</h3>
    </div>
    <form data-bind="submit: addToSummary">
        <input type="number" 
               placeholder="How much @Model["ProductName"] do you want?" />
        <button>Add product</button>
    </form>
</li>

当我点击<button>Add Product</button> 时，我想将提交的元素的<h3></h3> 内的文本发送给KnockoutJS。

使用 KnockoutJS 的文件是 外部 并且 独立 的 HTML。它的名字是summary.js，代码如下：

function ProductReservation(id, name, unity, quantity) {
    var self = this;

    self.id = id;
    self.name = name;
    self.unity = unity;
    self.quantity = quantity;
}

function SummaryViewModel() {
    var self = this;

    self.products = ko.observableArray([
        new ProductReservation(1, "Testing", "kgs", 1)
    ]);

    self.addToSummary = function () {
        // Do Something
    }
}

我在想什么

HTML：

<li>
    <div class="introduction">
        <h3 data-bind="text: productName">@Model["ProductName"]</h3>
    </div>
    [...]
</li>

JS：

productName = ko.observable("text: productName");

但是，当然，没有成功——这不是正确的上下文或语法，只是为了说明。

所以我问：我需要做什么？

Answer 1

您正在通过 submit 绑定绑定 addToSummary。默认情况下，KO 将表单元素发送到提交绑定函数。

所以addToSummary应该有一个参数——

self.addToSummary = function (formElement) {
    // Do Something
}

您可以向此函数传递其他参数（如 KO 的 click binding documentation 在“注 2”下所述），或者您可以在表单元素中添加一个隐藏字段并从那里拉取它。

<li>
    <div class="introduction">
        <h3>@Model["ProductName"]</h3>
    </div>
    <form data-bind="submit: addToSummary">
        <input type="number" name="quantity" 
               placeholder="How much @Model["ProductName"] do you want?" />
        <input type="hidden" name="productName" value="@Model["ProductName"]" />
        <button>Add product</button>
    </form>
</li>

然后在您的淘汰代码中，您可以使用 jQuery 处理表单元素以提取数据 -

self.addToSummary = function (formElement) {
    var productName = $(formElement).children('[name="productName"]')[0].val();
    var quantity= $(formElement).children('[name="quantity"]')[0].val();
    // ...
    self.products.push(new ProductReservation(?, productName, ?, quantity));
}

Answer 2

根据我的经验，一个行之有效的策略是使用 implement a toJSON extension method 序列化您的模型（如果您使用 JSON.NET 之类的库，您可以对序列化和不序列化的内容有很大的控制权）。

在您初始化 KnockoutJS 的视图内部，您可以序列化您的模型并将其传递给您正在创建的 KnockoutJS ViewModel（假设：

主视图：

<script type="text/javascript">
    var viewModel = new MyViewModel(@Model.ToJSON());
</script>

视图模型：

function MyViewModel(options) {
    this.productName = ko.observable(options.ProductName);
}