我正在尝试在rivets.js中编写一个模块。 当我使用另一个嵌套组件创建组件时,模型不同步。 我只是无法想象。
如何在主父组件和子组件中同步哈希值?
谢谢。
这是小提琴(笔):http://codepen.io/anon/pen/qNmNJO?editors=1010
rivets.formatters.log = (data) => {
console.log(data);
};
rivets.formatters.filter = (items, arg) => {
console.log(items);
items = items.filter((item) => {
return item[arg];
});
return items;
};
rivets.formatters.eq = (value, arg) => {
return value == arg;
};
rivets.formatters.gt = (value, arg) => {
return value > arg;
};
rivets.formatters.lt = (value, arg) => {
return value < arg;
};
function ItemList(attributes) {
this.data = attributes;
this.checkbox_change = function(e, data) {
data.data.hash++;
};
}
rivets.components['item-list'] = {
template: function() {
return `
<div class="dest_wrap" rv-each-destination="data.destinations">
<label>
<input data-type="country" rv-on-click="checkbox_change" rv-checked="destination.selected" type="checkbox">
{ destination.name }
</label>
{ data.hash | log }
<span rv-text="data.hash"></span>
</div>
`;
},
initialize: function(el, attributes) {
return new ItemList(attributes);
}
};
// https://github.com/whayler1/rivets-example
let model = {
hash: 0,
destination_tree: [{
name: 'Itálie',
selected: false,
id: 1
}, {
name: 'Chorvatsko',
selected: true,
id: 2
}, {
name: 'Bulharsko',
selected: true,
id: 3
}],
};
function DestinationPicker(attributes) {
this.data = attributes;
}
rivets.components['destination-picker'] = {
template: function() {
return `
<div>
<item-list
hash="data.hash"
destinations=".data.destinations"
level="'countries'"
/>
</div>
<input type="number" rv-value="data.hash">
<span rv-text="data.hash"></span>
`;
},
initialize: function(el, attributes) {
return new DestinationPicker(attributes);
}
};
window.rivets_view = rivets.bind($('destination-picker'), model); // K čemu mohou přistupovat elementy
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.9.0/rivets.bundled.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="row">
<destination-picker destinations="destination_tree" hash="hash"></destination-picker>
</main>