1

我正在寻找一个库，它为我提供了一种将 json 绑定到由 rails 视图模板呈现的现有 dom 元素的轻量级方法。

我需要这样做的原因是我的应用程序允许就地编辑（使用 best_in_place），并且由于这些编辑，我页面上的其他数据需要更新并实时显示给用户。在编辑成功回调中，我正在对我的 API 进行 ajax 调用，以获取一个包含我想要显示的重新计算值的 json 对象。只需将该结果绑定到现有的 DOM 元素。

我知道我们会知道像 angular.js 和 knockout.js 这样的库，虽然我没有排除它们，但我希望找到一个更轻的选项。也许是一个 jquery 插件。

我确实找到了jquery-load-json，但这并不是我想要的。它想基于模板为我呈现 HTML。我只需要将 json 动态绑定到现有的 Dom 元素。

我欢迎任何想法，并对实现这一目标的其他方式持开放态度。

4

1 回答 1

1

您可以使用D3.js

D3.js 是一个基于数据操作文档的 JavaScript 库。D3 帮助您使用 HTML、SVG 和 CSS 将数据变为现实。D3 对 Web 标准的重视为您提供了现代浏览器的全部功能，而无需将自己束缚于专有框架，结合了强大的可视化组件和数据驱动的 DOM 操作方法。

在http://jsfiddle.net/jmeza/G52cC查看示例

Html 代码和脚本 d3.sj

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
<div id="container">
    <table class="letters">
        <tr>
            <td>a</td>
        </tr>
        <tr>
            <td>b</td>
        </tr>
        <tr>
            <td>c</td>
        </tr>
        <tr>
            <td>d</td>
        </tr>
    </table>
</div>

Javascript代码

// create some people
var people = [{
    upper: 'A'
}, {
    upper: 'B'
}, {
    upper: 'C'
}, {
    upper: 'D'
}];

var table = d3.select('table.letters');
var rows = table.selectAll('tr').data(people);

console.log('rows', rows);

如果您查看 chrome 控制台可以看到 json 数据属性绑定到 DOM 元素：

在此处输入图像描述

于 2013-04-06T15:25:42.930 回答