如何使用 rv-each 构造 Dynamic HTML

Question

我有两个数组 truck 和 jobs。现在我必须使用这两个数组构建一个列表。这就像循环两个 for 循环。对于第一个数组（卡车）中的每个元素（id），我需要单独使用相应的作业 ID 遍历第二个数组（作业）。

例如： id:1 - 应该包含 - thing1,thing2,thing3,thing4 id:2 - 应该包含 - thing5,thing6,thing7,thing8

我需要使用 rv-each 或铆钉为上述列表构建动态 html。

这是我的fiddle：http://jsfiddle.net/keshav_1007/wa5osfec/3/

HTML :

<div id="contentWrap">
    <ol rv-each="truck" rv-value="truck.id">
        <li rv-each-job="jobs" rv-value="job.id">{ job.job_number }</li>
    </ol>
</div>

JS :

    $(document).ready(function(){
    window.view = rivets.bind($('#contentWrap'),{
        truck:[{id:1},
               {id:2},
               {id:3},
               ],
        jobs:[
            {id:1,job_number:'thing1'},
            {id:1,job_number:'thing2'},
            {id:1,job_number:'thing3'},
            {id:1,job_number:'thing4'},
            {id:2,job_number:'thing5'},
            {id:2,job_number:'thing6'},
            {id:2,job_number:'thing7'},
            {id:2,job_number:'thing8'},
        ]
    });
});

现在我正在获取数组中的所有项目。但是我只需要获取关于第一个数组的元素，正如我在 "for example".

中提到的那样

帮我解决这个问题。我试过了，但无法正常工作。

提前致谢。

Answer 1

看看这个：http://rivetsjs.com/docs/guide/#formatters

我已经创建（更新）了您的 fiddle：http://jsfiddle.net/wa5osfec/7/

HTML:

使用格式化程序将返回值修改为rv-each-*。当然，您也可以传递您想要比较的值（在本例中为您的 ID）。

<li rv-each-job="jobs | compare truck.id" rv-value="job.id">{ job.job_number }</li>

JS:

（小心。forEach 没有经过深思熟虑。考虑到它不会在更大的数组和重复上表现出色）

rivets.formatters.compare = function(array, compare) {

    var tempArr = [];

    array.forEach(function(element, index, array) {
        if (element.id == compare) {
            tempArr.push(element);
        }
    });

    console.log(tempArr);

    return tempArr;
}

如何使用 rv-each 构造 Dynamic HTML

How to construct Dynamic HTML using rv-each

html

javascript

dynamic

rivets.js