使用 knockoutjs attr 编写 data* 属性答案

【问题标题】：Working with knockoutjs attr to write data* attributes使用 knockoutjs attr 编写 data* 属性
【发布时间】：2017-10-13 14:43:52
【问题描述】：

我遇到了 knockout.js 中的 data* 属性的问题，即。用attr 写出来。

我可以毫无问题地做到这一点：

<input data-bind='text: Title, attr: {name: "Events[" + viewModel.events.indexOf($data) + "].Title"}'/>

但如果我想使用data-id，常规方式不起作用，所以我在属性周围加上单引号：

<input data-bind='text: Title, attr: {'data-id': "Events[" + viewModel.events.indexOf($data) + "].Title"}'/>

这给了我

Error: Unable to parse bindings.
Message: SyntaxError: missing } in compound statement;
Bindings value: attr: {
http://127.0.0.1:21254/Scripts/knockout/knockout-2.2.0.js

有人可以看看这里出了什么问题吗？

干杯！

【问题讨论】：

标签： knockout.js custom-data-attribute

【解决方案1】：

你只需要在它周围加上双引号：

<input data-bind='text: Title, attr: {"data-id": "Events[" + viewModel.events.indexOf($data) + "].Title"}'/>

【讨论】：

@Michael Best：谢谢，你帮我解决了一个相关问题。

【解决方案2】：

您甚至不需要在 attr 名称周围加上双引号或单引号，只需简单地使用 data-id

<input data-bind='text: Title, attr: {data-id: "Events[" + viewModel.events.indexOf($data) + "].Title"}'/>

【讨论】：

【解决方案3】：

下面是一个工作 sn-p，说明如何使用 Knockout 设置自定义数据属性值：

ko.applyBindings({
  somevalue: 'foo',
  title: 'Knockout custom data attribute binding --  example'
});

$("#result").text($("#test-el").data("someattr"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="text: title, attr: {'data-someattr': somevalue}" id="test-el"></div>

<p>
  <b>Test data attribute expected value:</b> foo
</p>

<p>
  <b>Test data attribute value: </b>
  <span id="result"></span>
</p>

【讨论】：