javascript - Rails 和 knockout.js 绑定(bind)嵌套元素而不在 fields_for 中使用 foreach

标签 javascript jquery ruby-on-rails json knockout.js

我正在使用带有 knockout.js 和 ko.mapping 的 Rails 3.2。我能够从我的 json 数据映射并从中创建我的 viewModel,在 js 控制台中我可以很好地查看数据树。在我看来,我正在使用带有字段的 form_for 来呈现我的 View 。我想不通的是如何在 fields_for 内对我的输入进行数据绑定(bind),而不必使用 KO foreach 或 with。我的 json 结构如下所示。

{
  "ss_sections": [
    {
      "ss_lines": [
        {
          "ss_line_cells": [
            {
              "cell_name": "credits",
              "cell_value": "124795.00",
            },
          ]
        }
      ]
    }
  ]
}

由于我的 fields_for 已经在我的元素中循环,所以我如何在不使用 knockout.js 循环的情况下在我的输入上写出我的数据绑定(bind)属性以直接指向 cell_value?

最佳答案

数据绑定(bind)属性仍然需要导航由 ko 映射从数据生成的对象层次结构,所以我认为如果不在服务器上生成类似以下困惑的 html 之类的东西,你就无法逃脱( fiddle :http://jsfiddle.net/NAUeV/1/ ):

<table id="ss_section0">
    <tr id="ss_line0">
        <td id="cell0">
            <span data-bind="text:ss_sections()[0].ss_lines()[0].ss_line_cells()[0].cell_name"></span>
        </td>
        <td id="cell1">
            <span data-bind="text:ss_sections()[0].ss_lines()[0].ss_line_cells()[1].cell_name"></span>
        </td>        
    </tr>
    <tr id="ss_line1">
        <td id="cell0">
            <span data-bind="text:ss_sections()[0].ss_lines()[1].ss_line_cells()[0].cell_name"></span>
        </td>
        <td id="cell1">
            <span data-bind="text:ss_sections()[0].ss_lines()[1].ss_line_cells()[1].cell_name"></span>
        </td>        
    </tr>    
</table>

虽然它看起来非常统一并且易于生成。

您确定需要在服务器上生成 html 吗?为什么不直接将 json 发送到客户端并使用标准的 foreach/with 在客户端生成?

关于javascript - Rails 和 knockout.js 绑定(bind)嵌套元素而不在 fields_for 中使用 foreach,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19819924/

相关文章:

mysql - 考虑在 Rails 上进行扩展,您会编写手写 SQL 吗?使用续集 gem ?

javascript - for 循环和图像

javascript - AngularJS 通过给定键更新数组项

javascript - 将 d3.js 图表的平移限制为一个方向

javascript - 使用数组中的值创建对象

ruby-on-rails - 在保存到数据库之前初始化模型对象并检查有效性

Javascript 函数似乎总是接收相同的输入

jquery - 使用可扩展框制作网格

javascript - 如何将较少的变量更改推送到 html iframe?

ruby-on-rails - CSS、HTML : How can i make the div or <p> width dynamic as the text line increses/decreses