我正在构建一个GroupPicker类,该类本质上管理一个界面,该接口允许用户在“已分配”和“未分配”两列之间移动项。列中的项具有父级和子级的层次结构,因此如果分配子项,父项也是。
我所做的可能是完全好的,但在我看来,将HTML耦合到类本身似乎是一种代码味道。类需要灵活,因为有时项不是分层的,有时我们不想删除已经分配的项,等等,让它与HTML结合似乎使它变得非常僵化。
当处理一个类的唯一目的是管理HTML的状态和输入的值时,最佳实践是什么?
📷
Available Contact Groups
假设我有组件,当调用render()时,组件被呈现,然后挂载到DOM节点上:
render() {
// Render the HTML elements
const content = renderParent();
// Mount onto the DOM element with id `app`;
let element = document.getElementById('app');
element.innerHTML = '';
element.appendChild(div);
}
renderParent(
当我调用this.rerender();时,我试图在DOM中重新呈现一个组件,在下面的示例中,我有一个将数据保存到服务器的表单,在此之后,我希望重置表单,以便用户可以提交更多的数据。我不想单独清除每个属性(这只是一个例子,除了表单之外还有其他用途)。目前,当我运行this.rerender();时,它会调用诸如didRender()之类的方法,但不会替换DOM中的HTML。
有人知道怎么做吗?
示例:
route.hbs
{{my-component}}
my-component.js
actions: {
submit: {
// save form data to