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

我正在尝试集成到我的应用程序中。我已经掌握了基本表单输入和页面中常规数据的绑定值，但我不知道如何使用铆钉处理选择下拉菜单（下拉菜单）

我可以用每个标记构建一个select，如下所示：

但我想将菜单中的选定值绑定到模型值（在我的小提琴中，我会将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（trucks.job_id）的值更新时，如何触发上面的代码？

事实证明，这非常简单。我考虑过删除这个问题，但也许我不是唯一一个想这么做的白痴。这是我最新的小提琴：

以下是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>

{job.job_number}


{job.job_number}

{truck.job_id}

所以基本上，我忘记了可以为

指定一个值，就像

一样。当我意识到这一点时，我尝试了

rv value

，这也很有效。从这一点上讲，它实际上与绑定文本字段差不多

然后是选择的问题。请注意，我的应用程序使用的是旧版本的Selected，我不想升级，因为它工作正常。我认为事件触发器现在可能有不同的名称。无论如何，为了更新所选的选择菜单，您必须在每次更新原始

上的值时触发更新事件。我用jQuery做了很多，但从来没有用过铆钉，因为我昨晚才开始使用铆钉

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

然后我开始考虑铆钉格式化程序。它们必须在每次更新变量时运行，以便更新模板。你会发现，它们只是一些函数，把新值作为参数，输出格式化后的值。因此，如果您获取该值并将其原封不动地返回，那么您就得到了一个小函数，该函数在变量更新时可以可靠地执行。您可以将模糊的日耳曼事件触发器放在那里，但必须首先通过调用jQuery的

val（）

，手动更新原始select，因为您是在

实际更新之前执行的

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

专业提示：在调用

rivets.bind（）

之前，必须声明格式化程序。因为

---

嗯，我确实学到了很多。我想我们会看看是否还有其他人能从中受益。耶

有没有办法获取值和id？可能，但我找不到。我认为您可以使用watch.JS（）之类的东西在truck.job_id上设置一个watch，但是一旦您将模型数据加载到铆钉中，它似乎进入了一个神秘的漩涡，我还不知道如何访问它。铆钉似乎也有自己的内置手表功能，但我也没能弄清楚它们。很确定这是因为我愚蠢无知，而不是铆钉方面的真正失败。但是我愚蠢无知的自己有一个截止日期，所以我最终切换到Angular来完成我的项目。我在Angular中是这样做的：我取出了通用选择，只留下了选中的选择，因为在我的用例中，所有的选择都是选中的，所以我还没有弄明白如何使用非选中的选择来实现这一点（相当肯定有大量的例子，但我不需要这么做）还有，我很确定有一种方法可以做到这一点。我就是想不出来。同样，我认为Angular可能比我的更干净，但当它开始工作时我停止了编码。我对这两个库都有点超出了我的编码舒适区。是的，我明白，我不认为只有你我感觉像铆钉由于缺少数据绑定的文档，我认为在将来我将要么查看react，要么在出现更好的东西之前不使用数据绑定

<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>