javascript - 如何使用 rv-each 构造动态 HTML

Question

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

例如:id:1 - 应该包含 - thing1,thing2,thing3,thing4id: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'},
        ]
    });
});

现在我正在获取数组中的所有项目。但是我只需要获取与第一个数组有关的元素，正如我在“例如”中提到的那样。

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

提前致谢。

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