如何将 HTML select 绑定到 Rivets.JS 中的模型值？

Question

我正在尝试将 Rivets.JS 集成到我的应用程序中。我掌握了基本表单输入和页面中常规数据的绑定值，但我无法弄清楚如何使用 Rivets 处理 selects 下拉菜单。

我可以用每个标签构建一个 select，就像这个 JSFiddle: http://jsfiddle.net/eimajenthat/94ca1xht/

但我想将菜单中的 selected 值绑定到模型值（在我的 Fiddle 中，我会将 truck.job_id 绑定到 select） .

这是我的 JS：

$(document).ready(function(){
    window.view = rivets.bind($('#contentWrap'),{
        truck:{id:1,job_id:3},
        jobs:[
            {id:1,job_number:'thing1'},
            {id:2,job_number:'thing2'},
            {id:3,job_number:'thing3'},
            {id:4,job_number:'thing4'},
        ]
    });
});

这是我的 HTML:

<div id="contentWrap">
    <select>
        <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option>
    </select>
</div>

奖励积分：我的应用程序中的所有 select 元素都增加了 Chosen。这意味着每当我通过 JavaScript 更改选项或 selection 时，我需要触发对 Chosen 的更新以供用户查看，如下所示：

$('#my-select').trigger('liszt:updated');

当用于选项（我的 Fiddle 中的工作）的模型更新时，或者当 select (trucks.job_id) 的值为更新了吗？

Answer 1

好吧，事实证明这很容易。我考虑过删除这个问题，但也许我不是唯一一个试图这样做的白痴。这是我更新的 Fiddle：http://jsfiddle.net/eimajenthat/94ca1xht/2/

这是 JS：

$(document).ready(function(){
  rivets.formatters.chosen = function(value,selector) {
    $(selector).val(value).trigger('liszt:updated');
    return value;
  };
  window.view = rivets.bind($('#contentWrap'),{
    truck:{id:1,job_id:3},
    jobs:[
      {id:1,job_number:'thing1'},
      {id:2,job_number:'thing2'},
      {id:3,job_number:'thing3'},
      {id:4,job_number:'thing4'},
    ]
  });

  $('#chosen-version').chosen();
});

这是 HTML:

<div id="contentWrap">
  <select rv-value="truck.job_id">
    <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option>
  </select>
  <br/>
  <select id="chosen-version" rv-value="truck.job_id | chosen '#chosen-version'">
    <option rv-each-job="jobs" rv-value="job.id">{ job.job_number }</option>
  </select>
  <p>
    { truck.job_id }
  </p>
</div>

基本上，我忘记了您可以像 <input> 一样为 <select> 指定一个值。当我意识到这一点时，我用 rv-value 尝试了它，它也有效。从那时起，它实际上与绑定文本字段几乎相同。

然后是选择题。请注意，我的应用程序使用旧版本的 Chosen，我不想升级，因为它运行良好。我认为事件触发器现在可能有不同的名称。无论如何，为了让 Chosen select 菜单更新，每次更新原始 <select> 上的值时都必须触发更新事件。我用 jQuery 做了很多，但从来没有用 Rivets，因为我昨晚才开始使用 Rivets。

我需要一种方法来监视变量并在变量的更改事件上触发我的更新事件。浏览 Rivets 文档，看起来 Adapters 可能符合要求，因为它们似乎具有监控功能，但当我深入研究时，我有点困惑。

然后我开始考虑 Rivets Formatters。每次更新变量时，他们都必须运行才能更新模板。事实证明，它们只是将新值作为参数并输出该值的格式化版本的函数。因此，如果您获取该值并且 return 它保持不变，那么您将获得一个小函数，该函数可以在更新变量时可靠地执行。您可以将模糊的日耳曼事件触发器放在那里，但您必须首先通过调用 jQuery 的 val() 手动更新原始 select，因为您在 <select>居然已经更新了

格式化程序还提供对附加参数的支持，非常方便。

专业提示：您必须在调用 rivets.bind() 之前声明格式化程序。因为.

嗯，我当然学到了很多东西。我想我们看看是否还有其他人能从中受益。耶！

如何将 HTML select 绑定到 Rivets.JS 中的模型值？

How do I bind an HTML select to a model value in Rivets.JS?

javascript

jquery

html-select

jquery-chosen

rivets.js