淘汰Javascript选择映射

时间:2017-05-25 22:39:55

标签: javascript knockout.js

看了很多stackoverflow示例但无济于事。我有一个字符串的javascript数组,我希望将其映射到一个ko observableArray,然后我想将其应用于我的HTML中的一个select。这是主要的ko对象:

actionData: {
    json: false,
    xml: false,
    pdf: false,
    word: false,
    csv: false,
    excel: false,
    prophet: false,
    editablePdf: false,
    editableWord: false,
    zip: false,
    httpUrl: null,
    username: null,
    password: null,
    connectionTest: false,
    requiredAlerts: [],
    folder: null,
    first: null,
    libraries: []
},

然后,当我的ajax调用返回数据时,我将其映射。此时我已经确认它很高兴(当我查看调试器时,请参阅“第一个”变量有正确的数据):

var list = JSON.parse(data.libraries);
self.CurrentAction.actionData.libraries = ko.observableArray(list);
//self.CurrentAction.actionData.folder = ko.observable();
self.CurrentAction.actionData.first = ko.observable(list[0]);
var first = self.CurrentAction.actionData.libraries()[0];

最后在我的.CSHTML中,我执行以下操作:

<div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-2" data-bind="with: CurrentAction.actionData">
        <div class="checkbox"><label><input class="format-checkbox" type="checkbox" data-bind="checked: editablePdf"> Make PDF document editable</label></div>
        <div class="checkbox"><label><input class="format-checkbox" type="checkbox" data-bind="checked: editableWord"> Make Word document editable</label></div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6" data-bind="with: CurrentAction.actionData">
        <label>LIB</label>
        <input data-bind="value: first">
    </div>
</div>
<div class="col-xs-12" style="padding-left:0px; padding-right:0px">
    <label>SharePoint Library</label>
    <!-- ko with: CurrentAction.actionData. -->
    <select data-bind="options : libraries,
                        value : folder,
                        optionsCaption : 'Please choose a SharePoint Library...'"
            style="width: 100%; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-radius:4px;border:1px solid #AAAAAA;">
    </select>
    <!-- /ko -->
    <p style="font-size: 13px; margin-top: 5px;">Your files will be sent to this library when submitted</p>
</div>

我在选择中一无所获。我已经验证了构造中的其他元素是否存在,但由于某种原因,“库”不是,或者我的映射不正确?

enter image description here

更新

感谢下面的好答案,我已经全力以赴。基本上我有一些问题:

  1. 我的actionData实际上是映射到另一个缺少library对象的对象。这是由于我不知道的其他一些代码。一旦我修复了数据就开始正确映射/绑定

  2. 一旦我有了正确的对象,library已经是一个observeableArray,所以没有必要将它重新映射到observable。新代码如下:

  3. if (data.statusCode == "200") { var list = JSON.parse(data.libraries); self.CurrentAction.actionData.libraries(list); }

    1. 最后,之前的错误对象已被保留,因此当我再次运行时,旧对象持续存在(不正确)数据被加载并破坏了所有内容。
    2. 最终的HTML版本如下所示:

             <div class="col-xs-12" style="padding-left:0px; padding-right:0px">
                  <label>SharePoint Library</label>
                  <select data-bind="options : CurrentAction.actionData.libraries,
                                     value : CurrentAction.actionData.folder,
                                     optionsCaption : 'Please choose a SharePoint Library...'"
                          style="width: 100%; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-radius:4px;border:1px solid #AAAAAA;">
                      <option data-bind="text: Name"></option>
                  </select>
                  <p style="font-size: 13px; margin-top: 5px;">Your files will be sent to this library when submitted</p>
              </div>
      

      非常感谢你们的出色答案!

1 个答案:

答案 0 :(得分:1)

我没有完全关注你的问题,但是我使用你的数据并使用选项绑定将其映射到选择它似乎工作正常。在下面运行代码段

&#13;
&#13;
var data = {
  json: false,
  xml: false,
  pdf: false,
  word: false,
  csv: false,
  excel: false,
  prophet: false,
  editablePdf: false,
  editableWord: false,
  zip: false,
  httpUrl: null,
  username: null,
  password: null,
  connectionTest: false,
  requiredAlerts: [],
  folder: 'three',
  first: null,
  libraries: ['one', 'two', 'three', 'four', 'five']
}
var viewModel = ko.mapping.fromJS(data);

$(document).ready(function() {
  ko.applyBindings(viewModel);
});
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<select data-bind="options : libraries,
                        value : folder,
                        optionsCaption : 'Please choose a SharePoint Library...'" style="width: 100%; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; border-radius:4px;border:1px solid #AAAAAA;">
</select>
&#13;
&#13;
&#13;