Trabajar con knockoutjs attr para escribir datos * atributos

Me estoy topando con un problema con los atributos data* en knockout.js ie. escribiéndolos con attr.

Puedo hacer esto sin problema:

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

Pero si quiero usar data-id, la forma regular no funciona, así que pongo una comilla simple alrededor del atributo: 

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

Que me da 

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

¿Puede alguien ver lo que salió mal aquí?

Salud!

Author: Liam, 2013-01-23
Source

3 answers

Solo necesita poner comillas dobles alrededor de él: 

<input data-bind='text: Title, attr: {"data-id": "Events[" + viewModel.events.indexOf($data) + "].Title"}'/>
 79
Author: Michael Best,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-23 02:04:09

A continuación se muestra un fragmento de código que ilustra cómo establecer un valor de atributo de datos personalizado con 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>
 1
Author: g.carey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-03 19:07:39

Ni siquiera necesita poner comillas dobles o simples alrededor del nombre attr, simplemente vaya con data-id 

<input data-bind='text: Title, attr: {data-id: "Events[" + viewModel.events.indexOf($data) + "].Title"}'/>
 0
Author: Prasanth K C,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-13 06:43:52