rivets.js试图使自定义适配器工作

Question

我正在尝试获得一个自定义适配器来与rivets.js一起使用，但是它既不更改模型，也不会将其调用。如果有人也在使用rivets.js，我可以在此方面使用一些帮助：

jsfiddle示例代码

var menuContext = {
  menu: {
    watchList: {
      status: false,
      view: function() {
        // call other view
      }
    },
    profile: {
      status: false,
      view: function() {
        // call other view
      }
    }
  }
};
rivets.binders['on-select-item'] = {
  bind: function(el) {
    var adapter = rivets.adapters[rivets.rootInterface];
    var model = this.model;
    var keypath = this.keypath;
    var that = this;
    this.callback = function(ev) {
      ev.preventDefault();
      var value = adapter.get(model, keypath);
      var newValue = !value;
      adapter.set(model, keypath, newValue);
    };
    el.addEventListener('click', this.callback);
  },
  unbind: function(el, value) {
    el.removeEventListener('click', this.callback);
  },
  routine: function(el, value) {
    console.log('I am only being called once!');
  
    value ? el.classList.add('enabled') : el.classList.remove('enabled');
  }
};
var menu = document.querySelector("#menu");
rivets.bind(menu, menuContext);

#menu .enabled {
  background-color: green;
}

<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<ul id="menu">
  <li>
    <a href="#" role="button" rv-on-select-item="menu.watchList.status">
    Item 1, value should toggle (true|false) <span rv-html="menu.watchList.status"></span>
		  		</a>
  </li>
  <li>
    <a href="#" role="button" rv-on-select-item="menu.profile.status">
		    		Item 2, value value should toggle (true|false) <span rv-html="menu.profile.status"></span>
		  		</a>
  </li>
</ul>

Answer 1

keypath这是您在模板中指定的完整路径字符串，但是您的模型是持有keypath中的最后一个属性的对象（不要问我为什么，为什么，那是调试）并查看默认适配器的源代码的情况，它似乎没有进行任何遍历：

get: function(obj, keypath) {
  return obj[keypath];
},
set: function(obj, keypath, value) {
  return obj[keypath] = value;
}

因此，您必须自己解决keypath。在这种情况下，如下所示：

var menuContext = {
  menu: {
    watchList: {
      status: false,
      view: function() {
        // call other view
      }
    },
    profile: {
      status: false,
      view: function() {
        // call other view
      }
    }
  }
};
rivets.binders['on-select-item'] = {
  bind: function(el) {
    var adapter = rivets.adapters[rivets.rootInterface];
    var model = this.model;
    var keypath = this.keypath;
    var that = this;
    this.callback = function(ev) {
      ev.preventDefault();
      var key = keypath.split('.').slice(-1);
      var value = adapter.get(model, key);
      var newValue = !value;
      adapter.set(model, key, newValue);
    };
    el.addEventListener('click', this.callback);
  },
  unbind: function(el, value) {
    el.removeEventListener('click', this.callback);
  },
  routine: function(el, value) {
    console.log('I am only being called once!');
    value ? el.classList.add('enabled') : el.classList.remove('enabled');
  }
};
var menu = document.querySelector("#menu");
rivets.bind(menu, menuContext);

#menu .enabled {
  background-color: green;
}

<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<ul id="menu">
  <li>
    <a href="#" role="button" rv-on-select-item="menu.watchList.status">
    Item 1, value should toggle (true|false) <span rv-html="menu.watchList.status"></span>
		  		</a>
  </li>
  <li>
    <a href="#" role="button" rv-on-select-item="menu.profile.status">
		    		Item 2, value value should toggle (true|false) <span rv-html="menu.profile.status"></span>
		  		</a>
  </li>
</ul>

我知道您正在遵循官方网站上的两种绑定示例，但是图书馆自那以后似乎得到了重大更新。如果您想知道"为什么"更好的地方是作者可以提供一些见解的GitHub回购。