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

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>像a的值<input>.当我意识到这一点时,我尝试了它rv-value并且也有效.从那时起,它实际上与绑定文本字段大致相同.

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

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

然后我开始考虑Rivets Formatters.每次更新变量时都必须运行它们才能更新模板.并且它转变为你只是将新值作为参数的函数,并输出值的格式化版本.因此,如果您获取该值并使其保持不变,那么您将获得一个在更新变量时可靠地执行的小功能.你可以把你的含糊的日耳曼事件触发器放在那里,但你必须先调用jQuery来手动更新原始选择val(),因为你在<select>实际更新之前执行.

Formatters还提供对其他参数的支持,这非常方便.

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

嗯,我当然学到了很多东西.我想我们会看看是否有其他人可以受益.好极了!