检索URL参数以预先选择多选列表-提线木偶

retrieve URL parameters to pre select multi select list - marionette

本文关键字：列表 提线木偶 选择 URL 参数 检索      更新时间：2023-09-26

我是Marionette的新手。我有一个可以传递参数的路由器。该模板有几个复选框、单选按钮和一个多选列表。当对模板进行rended时，复选框和单选按钮的行为与参数值一致。我正试图找到传递参数的正确方法，以便填充多选列表框中的项目。有可能吗？如果没有，是否可以从路由器中检索URL并更新onBeforeShow功能中的列表框？

我的路由器看起来和这个相似。/search/{"isMine":true,"radioButton":"a1"}

模板如下

<input type="radio" name="radioButton">
<input id="isMine" type="checkbox" id="isMine" >
<select name="optionsList" id="optionsList" multiple>
   <option value="1"> One < /option>
   <option value="2"> Two < /option>
   <option value="3"> Three < /option>
</select>

我尝试了以下操作，但当模板渲染时，列表框中的项目永远不会被选中。

#search/{"taken":true,"radioButton":"a1", "optionsList" : ['1','2']}

这是完全可能的，但需要遵循几个步骤。

概述

首先在Marionette AppRouter中配置路由（请参阅配置路由）。请确保遵循Backbone制定的路线规范（请参阅路线）。

路线

你的路线最终会看起来像：

search/:taken/radioButton:radio/optionsList:optarray

其中，taken将采用truthy或falsy parmeter，radioButton将采用字符串，optarray将是字符串化数组（请参见JSON.stringfy）。

例如，如果take == false和radioButton == '33a' and optarray==1'，则路由可以是：

"search/0/radioButton:33a/optionsList:1〃；

路由处理程序

AppRouter中的每个路由都必须与一个函数匹配。此功能将捕获从路线中捕获的参数。

样品

假设您将路由与AppRouter中名为showOptionsView的某个方法相匹配。然后showOptionsView将接收从路由捕获的参数。

本质上，你会把这样的东西放在一起：

var OptionsLayout = Marionette.LayoutView.extend({...});
var OptionsView =  Marionette.ItemView.extend({...});
var appOptionsLayout = new OptionsLayout;
var MyRouter = Marionette.AppRouter.extend({
 routes : {
    "search/:taken/radioButton:radio/optionsList:optarray": "showOptionsView"
  },
  showView: function(taken, radioButton, optArray) {
    var newOptionsView = new OptionsView({
        taken: taken,
        radioButton: radioButton,
        optionArray: JSON.parse(optArray)
    })
  }
});

如何实现OptionsView模板中的选项，我将留给您。这个问题的答案是如何将参数从URL获取到您想要的视图。

AppRoute控制器

该示例使用最直接的方法来使用AppRoute，其中附加到路由的方法是AppRoute对象本身的属性。如果您可以将类似的路由及其方法分组在一起，请参阅向AppRoute添加控制器对象的文档。

相关文章：