javascript - 如何将 HTML 选择绑定(bind)到 Rivets.JS 中的模型值？

Question

我正在尝试整合 Rivets.JS进入我的应用程序。我掌握了基本表单输入和页面中常规数据的绑定(bind)值，但我无法弄清楚如何使用 Rivets 处理选择下拉(下拉菜单)。

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

但我想将菜单中的选定值绑定(bind)到模型值(在我的 Fiddle 中，我会将 truck.job_id 绑定(bind)到选择)。

这是我的 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>

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

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

每当更新选项的模型(在我的 fiddle 中的作业)时，还是在更新选择(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>

基本上，我忘记了您可以为 <select> 指定一个值就像一个<input> .当我意识到这一点时，我尝试了 rv-value这也行得通。从这一点来看，它实际上与绑定(bind)文本字段几乎相同。

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

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

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

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

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

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