Question

我很擅长使用Backbone和Underscore..well Web Development。我想学习如何从此模板格式中单击检索单个“模型”数据以填充弹出模式。任何方向都非常感谢！

目前，我有一个项目列表，通过将我的集合传递到此模板而不是为每个模型项使用单独的视图来呈现。我想知道如何检索每个项目的数据以填充模式点击。

我尝试从e.currentTarget.html获取html数据，但我得到了未定义的

input = c("XX-XXZZXX-XZXXXXX", "XX-XXXZXXZXZXXX", "XXXXXZXXXZXXZX-X", 
          "XXXZXXXZXZXZXXX", "XZXXX-XXXZXZXXX", "XX-XXX-ZZX", "XXZX-XXZXXX-XZ", 
          "XZXZXX-XXZXXZXX")

desired_output = c("XX-XXZZXXZXZXXXXX", "XX-XXXZXXZXZXXX", "XXXXXZXXXZXXZXZX", 
                   "XXXZXXXZXZXZXXX", "XZXXX-XXXZXZXXX", "XX-XXX-ZZX", "XXZX-XXZXXXZXZ", 
                   "XZXZXXZXXZXXZXX")


sp <- strsplit(input, '')
f <- function(x, n = 2) {
  x[x == '-' & (cumsum(x == 'Z') >= n)] <- 'Z'
  paste0(x, collapse = '')
}
identical(res <- sapply(sp, f), desired_output)
# [1] TRUE

cbind(input, res, desired_output)
#      input               res                 desired_output     
# [1,] "XX-XXZZXX-XZXXXXX" "XX-XXZZXXZXZXXXXX" "XX-XXZZXXZXZXXXXX"
# [2,] "XX-XXXZXXZXZXXX"   "XX-XXXZXXZXZXXX"   "XX-XXXZXXZXZXXX"  
# [3,] "XXXXXZXXXZXXZX-X"  "XXXXXZXXXZXXZXZX"  "XXXXXZXXXZXXZXZX" 
# [4,] "XXXZXXXZXZXZXXX"   "XXXZXXXZXZXZXXX"   "XXXZXXXZXZXZXXX"  
# [5,] "XZXXX-XXXZXZXXX"   "XZXXX-XXXZXZXXX"   "XZXXX-XXXZXZXXX"  
# [6,] "XX-XXX-ZZX"        "XX-XXX-ZZX"        "XX-XXX-ZZX"       
# [7,] "XXZX-XXZXXX-XZ"    "XXZX-XXZXXXZXZ"    "XXZX-XXZXXXZXZ"   
# [8,] "XZXZXX-XXZXXZXX"   "XZXZXXZXXZXXZXX"   "XZXZXXZXXZXXZXX"

我曾考虑过遵循Addy Osmani在To-Do List示例中使用的方法，但我尝试不必为项目集合定义View，为各个模型定义View。我可以看到这个方法如何能够为各个模型分配一个点击监听器并将该模型传递给modalView渲染，但是再次尝试不这样做（如果可能的话）。

以下是数据的示例

  <% _.each(collection, function(model){ %>
  <div class="col-md-4 col-sm-6 portfolio-item">
  <div class="thumbnail">
    <div class="caption">
      <h3><a href= <%= model.url %>><%= model.caption %></a></h3>
    </div>
    <img class="img-responsive" src= <%= model.image %> alt=<%= model.alt %>/>
  </div>
  <h3 class="project-title text-center"><%= model.title %></h3>
  </div><%});%>

这是我正在使用的收藏和视图

{
    "projects": [{
        "title": "Portfolio Website",
        "caption": "My Showcase",
        "dates": " ",
        "url": "https://google.ca",
        "description": "Lorem Etc Etc",
        "image": "picture.jpeg",
        "alt": "Portfolio Image"
    }, {
        "title": "Online Resume",
        "caption": "Learn About Me!",
        "dates": " ",
        "url": "resume.com",
        "description": "Look at my resume",
        "image": "resume.jpeg",
        "alt": "Resume Image"
    }, {
        "title": "Project",
        "caption": "Coming Soon",
        "dates": " ",
        "url": "",
        "description": "Lorem I Don't know what comes after Lorem",
        "image": "picture.jpeg",
        "alt": "Image"
    }]
}

感谢您的时间和帮助！

Answer 1

据我了解，您希望在模板中有一个指向模型的链接。但我们只能在那里有html。解决方案是为每个模型提供一些唯一的ID。

您可以将id添加到所有模型中，将其放在模板中

<div class="col-md-4 col-sm-6 portfolio-item" data-id="<%= model.id %>">

在事件处理程序中获取此ID

var id = $(e.currentTarget).data('id');

和get模型来自此ID的集合

var model = this.collection.get(id);

顺便说一句，我强烈建议您尝试Marionette，这是Backbone的超级视图级别扩展。

从下划线模板中检索JSON数据

1 个答案: