Rivets.js与儿童组件同步模型

时间:2016-06-30 13:08:12

标签: javascript model rivets.js

我正在尝试在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>

0 个答案:

没有答案