Question

我正在使用一个很好的todomvc项目的Vanilla JS实现的应用程序。应用程序使用vanilla JS以MVC方式构建。我正在尝试实现一种方法来获取MULTIPLE待办事项列表（从localstorage获取所有列表，然后单击列表并让它显示所有待办事项）

// Make a new TaskList
taskButton.addEventListener('click', function() {
    // 1. Make the new todo list
    let newList = newTaskList.value;
    var todo = new Todo(newList);
    // 2. Set the view and retrieve all the todos
});



// Get all key values for tasklists, render and make links to different todo collections
function getTaskList() {
    var i, renderTask;

    renderTask = '';

    for (i = 0; i < localStorage.length; i++)   {
        renderTask += "<li><a class='tasklink' href='#' value='" + localStorage.key(i) + "'>" + localStorage.key(i) + "</a></li>";
    }
    return renderTask;
}

var taskList = getTaskList();

document.getElementById('tasklist').innerHTML = taskList;


// querySelectorAll produces a DOM nodelist not an array
var matches = document.querySelectorAll('a.tasklink');

// This is a node list, not an array. This is not the best way to do this
// would be mor elegant to use a forEach on the matches nodelist probably
for (var i=0; i < matches.length; i++) {
    matches[i].addEventListener('click', function(e) {
        var taskListValue = e.target.innerHTML;
        // create a new todo object based on click selection
        var todo = new Todo(taskListValue);
        todo.controller.setView(document.location.hash);
    });
}

我编写了部分代码来执行此操作（需要重构）它基本上获取了todomvc中的所有localstorage列表（_dbname）。单击其中一个时，您将创建一个新的Todo列表。

我很确定我有绑定问题。因为当我执行下面的代码并在列表之间切换时，它会在它到达控制器时起作用：

 function Controller(model, view) {

    var self = this;
    self.model = model;
    self.view = view;

    console.log('self:');
    console.log(self);
    console.log('self.model:');
    console.log(self.model);

    self.view.bind('newTodo', function (title) {
        self.addItem(title);
    });

console.log的输出是正确的...模型在对象之间完美地改变（多个待办事项列表）......但是当我开始向待办事项列表添加新项目时......说...我有两个列表，“艺术”和“收件箱”...如果我切换到“艺术”一个并添加一个新的待办事项......它只会将其添加到“收件箱”一个并显示艺术和收件箱来自收件箱localstorage的todos（将所有内容放入收件箱localstorage中）。

因此，在添加待办事项的方法时调用此函数：

 self.view.bind('newTodo', function (title) {
        self.addItem(title);
    });

然后我假设它绑定了视图函数，然后在新todo上按Enter键时执行回调（self.addItem（title））...此方法在控制器中：

 Controller.prototype.addItem = function (title) {
    var self = this;

    if (title.trim() === '') {
        return;
    }

    self.model.create(title, function () {
        self.view.render('clearNewTodo');
        self._filter(true);
    });
};

所以，self.model应该是正确的...它被更改并传递给控制器...但是当它转到这个方法时... BOOM模型仍然是收件箱，而不是艺术。所以，我最好的猜测是存在绑定问题，我的更改的模型名称没有转移到方法中。

这是一个绑定问题不是吗？

由于我对JS有点新手，我脑子里的一些东西告诉我，我正在以错误的方式接近这一点，而不是利用代码结构的MVC功能，我注意到了Todo（）对象....它已经有一个名字，可以在这里传递，如在Todo（名称）...所以有人已经建立了一个方法，有一个以上的列表......

我遇到的问题是如何从UI创建新列表并让它们切换并显示待办事项。我知道有些人会说....你应该使用一个框架。在React或其他东西中构建它...但对我来说，在继续尝试掌握框架之前，深刻理解vanilla JS似乎是至关重要的。

任何帮助都会很棒！

todomvc vanilla javascript中的多个待办事项列表？

0 个答案: