当前位置: 首页 > 知识库问答 >
问题:

如何在一个示例主干中构造两个嵌套列表。js待办事项列表应用程序?

别烨熠
2023-03-14

我正在主干网中处理一个示例待办事项列表项目,我想了解框架希望我如何在嵌套列表场景中组织其视图和模型。

为了阐明我的意思,我的单页主干应用程序应该显示待办事项列表。从后端的角度来看,有一个列表资源和一个项目(todo列表中的一个条目)资源。大致如下:

  • 周一的杂务
  • 芹菜

由于我的是Rails 3.2应用程序,我模糊地遵循Railscasts的主干。js教程,这就是我获取当前设计的来源。我很想知道我是否偏离了规定的模式,或者我是否在正确的轨道上!

到目前为止,我已经:

ListsIndex View                         //index of all lists
\-- ListsCollection
     \-- ListView / Model               //individual list
          \-- ItemsIndex View           //index of items in one list
              \-- ItemsCollection
                  \-- Item View / Model //individual todo item

html" target="_blank">流程为:

  1. 在路由器初始化时,在后端路由上获取 /lists列表集合。在ListsIndex集合部分的“重置”事件上,对集合中的每个项目执行渲染(),附加到列表索引视图模板。
  2. 在每个Item View的初始化方法中(这是您连接第二级fetch的地方吗?)fetch()将 /lists/: id/Item后端路由中的项目放入特定于该视图的ItemsCollection中。
  3. 在同一方法中,实例化一个ItemsIndex对象并将集合传递给它。同样,在ItemsIndex中,有一个“重置”事件处理程序,用于填充集合时,此时它应该呈现从项目集合中获取的每个模型并将它们附加到自己的视图中。

我基本上是在设计列表,并将其向下镜像到项目。不同的是,我不再依赖路由器。因此,我使用ListView的initialize方法来达到类似的效果。

耶/不?大错特错?谢谢!

共有1个答案

姜嘉荣
2023-03-14

TL:DR;1) 我将引导您的初始数据,而不是fetch()reset()。2) 您可以根据需要在初始化视图时进行提取。或者您可以在开始时加载数据。请记住,如果您在init中提取数据,那么异步性质在呈现时不会准备好数据。如果您有一个侦听器在等待同步/添加/等等,这不是问题。3)我不知道itemIndex对象是什么意思,但您可以创建对象并根据需要向其添加集合。或者,如果你知道所有的列表最终都会有一个集合,那么你可以从一开始就加入。如果需要,可以重置(除非您给它选项{add:true},否则fetch会自动执行此操作),或者只需在它们出现时逐个添加它们。尽管重置()、删除先前的视图、渲染所有视图似乎是人们使用完整fetch()进行操作的常见方式。

我觉得它看起来不错。主干网的好处在于,您可以通过多种不同的方式来实现。例如,数字2表示从视图连接第二个fetch()。如果要延迟加载,可以这样做。或者,您可以在应用程序启动时,在任何操作完成之前获取所有数据。这真的取决于你。我可能会这样做。

这就是我制作这样一个应用程序的方式(只是我的喜好,我不知道它是更好还是更差,也不知道它是否和你描述的一样。)

首先,我将创建一个名为ListModel的模型。它将有一个id和一个名称attr。这样,您可以创建许多单独的列表,每个列表都有自己的id,您可以单独获取这些id。

每个ListModel内部都有一个ItemsCollection。此集合有一个基于其所属ListModel的url。因此,ListModel-1的集合url类似于/list/1

最后是ItemModel,它是一个资源id和文本。

ListCollection
    ListModel  // Monday Chores
        ItemCollection
            ItemModel  // Mail
            ItemModel  // Laundry
            ItemModel  // Drycleaning
    ListModel  // Grocery
        ItemCollection
            ItemModel  // Celery
            ItemModel  // Beef

所以在这个小展示中,你会注意到我还没有把任何与视图相关的东西放进去。我不知道这是不是更概念性的东西,但这是数据层次结构的样子,你的视图可以,应该完全独立于它。我不太确定你是如何包含上面的视图的,但我认为这可能会使它更清晰。

至于定义这些结构,我认为有两件事。

首先,我要确保在我的集合中定义了我的ListModel。这样,我可以在生成/添加新模型时使用集合add(哈希)来实例化它们。

其次,我将定义ListModel,以便在创建ListModel时,它会自动创建一个ItemCollection作为ListModel对象的属性(而不是属性)。

因此,理想情况下,您的ListModel如下所示:

ListModel.ItemCollection

在应用程序初始化之前,我会引导数据进入而不是fetch()。(这种地址是您提出的第1点)理想情况下,当您的Backbone应用程序启动时,它应该从一开始就拥有所需的所有必要数据。我会在头部传递一些数据,如下所示:

 var lists = [listModel-1-hash, listModel-2-hash];

现在,当应用程序启动时,您可以立即创建这两个列表。

var myLists = new ListCollection();

_.each(lists, function(hash) {
    myLists.add(hash);  // Assumes you have defined your model in the ListCollection
}

现在,您的列表集合具有它所需的所有列表模型。

这就是视图的用武之地。您可以将任何内容传递给任何视图。但我可能会将视图分解为三件事。

AppView、ListModelView、ItemModelView等等。

想象一下这样的结构:

<body> // AppView
    <ul class="List"> // ListModelView
        <li class="Item"></li>     // ItemModelView
    </ul>
    <ul class="List"> // ListModelView
    </ul>
</body>

当您启动应用程序并创建AppView时,您会在AppView中生成每个ListModelView并将其附加到正文中。我们的列表是空的。也许当你点击它懒惰加载项目时。这就是你连接它的方式。

// In ListModelView
events: {'click':'fetchItems'}

fetchItems: function() {
    this.model.itemCollection.fetch();  // Assumes you passed in the ListModel into view
}

因此,既然我从一开始就引导了数据,那么这个fetch()调用将是您的“第二次”提取。(我正在回答你提出的第2点。)您可以在初始化中获取它。请记住,它是一个html" target="_blank">异步函数,因此如果在渲染时需要它们,它将无法工作。但是,您可以向该视图添加事件侦听器,这些侦听器正在侦听向itemCollections添加事件。

this.model.itemCollection.on('add', this.addItemView, this);

addItemView()将生成ItemView的新实例并附加它们。

对于第3点,您可以在需要时实例化一个集合,并将其放入ListModel中。或者你可以像我一样,确保你所有的模型都有一个ItemCollection。这取决于你的喜好和目标。你可能不需要所有这些,但出于某种原因,我想说明一下。我不知道,也许有帮助。

 类似资料:
  • 我一直在尝试用Android Studio制作一个待办事项列表应用程序。目的是在顶部有一个“添加新任务”按钮,它会打开一个对话框,我可以通过这个对话框输入新任务。然后任务会出现在按钮下方的列表中。 问题是按钮一直出现在列表中的每个任务后(重复的按钮是不可点击的) 问题截图 这是我的代码: 以下是xml:

  • 该插件为待办事项列表组件提供了简单的功能。 用法 该插件可以作为 jQuery 插件或使用数据 API 激活。 数据 API 通过向 ul 元素添加 data-widget="todo-list" 来激活插件。如果你需要提供 onCheck 和 onUncheck 方法,请使用 jQuery API。 jQuery jQuery API 提供了更多可自定义的选项,允许开发人员处理待办事项列表中的选

  • 我正在使用AngularJS制作一个简单的待办事项列表应用程序。我实际上使用的是一个ASP.NET MVC模板,但到目前为止,我已经设法通过使用Angular和Bootstrap使所有的工作都正常。

  • 问题内容: 我了解简单列表理解的工作原理,例如: 而且我也了解嵌套列表的综合工作原理: 所以,当我尝试这样做 我期望这样: 但是我得到了: 所以我有更好的方法解决问题,这给了我我想要的 但是我不明白在第一个代码中返回9个元素 问题答案: 它有9个数字的原因是因为python对待 类似于 即,它是一个嵌套循环

  • 本文向大家介绍Python中如何复制一个嵌套列表,包括了Python中如何复制一个嵌套列表的使用技巧和注意事项,需要的朋友参考一下 在本教程中,我们将看到在Python中复制嵌套列表的不同方法。让我们一一看。 首先,我们将使用循环复制嵌套列表。这是最常见的方式。 示例 输出结果 如果运行上面的代码,则将得到以下结果。 让我们看看如何使用列表理解和拆包运算符复制嵌套列表。 示例 输出结果 如果运行上

  • 问题内容: 我在python中有一个文件名,我想从所有文件名中构造一个。 这似乎不起作用。怎么办 问题答案: 如果您具有可散列对象的列表(文件名可能是字符串,那么它们应该算在内): 您可以直接构造集合: 实际上,将这种方式与 任何可迭代对象一起使用! (鸭子打字不好吗?) 如果要迭代进行: 但是很少需要这样做。我只提到它是因为该方法非常有用。