Question

我试图将Rivets.JS集成到我的应用中。我已经掌握了页面中基本表单输入和常规数据的绑定值，但我无法弄清楚如何使用Rivets处理选择drop（向下菜单）。

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

中一样

但我想将菜单中的选定值绑定到模型值（在我的小提琴中，我会将truck.job_id绑定到选择中）。

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

如果更新用于选项的模型（我的小提琴中的作业），或者更新select（trucks.job_id）的值时，如何触发上面的代码？

Answer 1

嗯，结果很简单。我考虑过删除这个问题，但也许我并不是那个试图做到这一点的唯一白痴。这是我更新的小提琴：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尝试了它，这也有效。从那时起，它实际上与绑定文本字段大致相同。

然后出现了选择的问题。只是一个注释，我的应用程序使用旧版本的选择，我不想升级，因为它的工作正常。我认为事件触发器现在可能有不同的名称。无论如何，为了使选择的选择菜单更新，每次更新原始<select>上的值时，都必须触发更新事件。我使用jQuery做了很多，但从来没有使用Rivets，因为我刚刚开始使用铆钉。

我需要一种方法来观察变量并在变量的更改事件上触发我的更新事件。看看铆钉文档，看起来像适配器可能符合要求，因为它们似乎具有监控功能，但是当我挖掘时，我有点困惑。

然后我开始考虑铆钉格式化程序。每次更新变量时都必须运行它们才能更新模板。并且它转变为你只是将新值作为参数的函数，并输出值的格式化版本。因此，如果你取值并且不改变它，你就会得到一个在变量更新时可靠地执行的小函数。您可以将模糊的日耳曼事件触发器放在那里，但是您必须首先通过调用jQuery val()来手动更新原始选择，因为您在<select>实际执行之前执行已更新。

Formatters还提供对其他参数的支持，非常方便。

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

嗯，我当然学到了很多东西。我想我们会看看是否有其他人可以受益。耶！

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

1 个答案: