绑定外部数据knockoutjs

时间:2014-12-18 13:56:31

标签: knockout.js knockout-3.0

来自eventschemas的数据没有绑定,即使我可以在浏览器中看到它..这可以在我在底部提供的$ data值中看到.. 请注意,这是一个非常小的问题重现,并且架构无法更改..

我的HTML

<div data-bind="with: g">

    <div><input type="text" class="form-control" data-bind="value: gname" /></div>

         <div>
              <table>

                  <tbody>
                     <tr data-bind="with:gdetails">
                        <td>
                           <select data-bind="options: eventschemas, optionsText: 'schema', value:eventschemacondition.schema"></select>

                         </td>

                    </tr>
                   </tbody>
               </table>
           <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
        </div>                
 </div> 

我的javascript:

 <script type="text/javascript">
        var eventschemas = [{ "schema": "Test"}, { "schema": "Another Test" }];

        var AppScope = function () {
             function EventSchemaCondition(data) {
                this.schema = ko.observable(data.schema);
                };
            function Gdetails(data) {
                this.eventschemacondition = ko.observable(data.eventschemacondition);
            };
            function G(data) {
                this.gname = ko.observable(data.gname);
                this.gdetails = ko.observable(data.gdetails);
            };
                function GsViewModel() {
                    var self = this;
                   self.g = ko.observable(new G({ gname: "", gdetails: new Gdetails({ eventschemacondition:new EventSchemaCondition({ schema: "" }) }) }));

                }
                ko.applyBindings(new GsViewModel());
          }();
    </script>

这就是我的$数据的样子:

{
  "gname": "tttt",
  "gdetails": {
    "eventschemacondition": {
      "schema": ""
    }
  }
}

正如您所见,&#39;架构&#39;在&#39; eventschemacondition&#39;即使我可以在浏览器的dropdownlistbox中看到值,它也是空的。

真诚地感谢任何帮助

由于

1 个答案:

答案 0 :(得分:2)

您需要在eventschemacondition().schema的{​​{1}}绑定中调用value

select
var eventschemas = [{ "schema": "Test"}, { "schema": "Another Test" }];

var AppScope = function () {
    function EventSchemaCondition(data) {
        this.schema = ko.observable(data.schema);
    }
    
    function Gdetails(data) {
        this.eventschemacondition = ko.observable(data.eventschemacondition);
    }
    
    function G(data) {
        this.gname = ko.observable(data.gname);
        this.gdetails = ko.observable(data.gdetails);
    }
    
    function GsViewModel() {
        var self = this;
        self.g = ko.observable(
        new G({ 
           gname: "", 
           gdetails: new Gdetails({ eventschemacondition:new EventSchemaCondition({ schema: "" })})
       }));
    }
    
    ko.applyBindings(new GsViewModel());
  }();