How to pass value in knockout js

2019-09-25 07:10发布

问题:

I need to pass value from one javascript to another using function call. I am returning value of month from II js to I js but value is not getting populated in html. Sample code is given below but its not working.Kindly help me to fix this code:

HTML FILE
========
<body>
    <div id="selectdiv">
        <input type="radio" id="radio1" name="radioGrp" value='div1' data-bind="checked:subDiv1" />div1
        <input type="radio" id="radio2" name="radioGrp" value='div2' data-bind="checked:subDiv1" />div2</div>
    <div id="myDiv" name="myDiv" class="myDiv" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
        <div id="subDiv1" name="subDiv1" data-bind="visible:subDiv1()=='div1'" class="subDiv1" style="color: #FF0000; border: 1px dotted black;">
             <h5>Section 1</h5>

            <p>MONTHS...</p>
            <div id="tabContainer">
                <ul data-bind="foreach: subDemoMainObj.months()">
                    <li> <b data-bind="text: $data"></b>

                    </li>
                </ul>
            </div>
        </div>
        <br />
        <div id="subDiv2" name="subDiv2" data-bind="visible:subDiv1()=='div2'" class="subDiv2" style="color: #FF00FF;border: 1px dashed black;">
             <h5>Section 2</h5>

            <p>This paragraph would be your content paragraph...</p>
            <p>Here's another content article right here.</p>
        </div>
    </div>
</body>

I JS FILE(main js file which is calling II js file for getting value of months)
=========
require(["knockout-2.2.1","subDemoMain"],
function(ko,demoMain){
$(document).ready(function() {
         alert("ready");
    var vm = function () {
        var self = this;
        self.subDiv1 = ko.observable(false);
        self.subDiv2 = ko.observable(false);

        self.months = new subDemoMain().getMonths();//ko.observableArray(['Jan', 'Feb', 'Mar', 'etc']);
    };

   /* var getMonths=function(){
        return ko.observableArray(['Jan', 'Feb', 'Mar', 'etc']);
    }*/
    // alert("ready2");
    ko.applyBindings(new vm());

    });
 });

II JS FILE
=========
define(["knockout-2.2.1"],
function(ko){

alert("ready1");
    var getMonths=function(){
        return ko.observableArray(['Jan', 'Feb', 'Mar', 'etc']);
    }
},
 });

回答1:

use ko.applybindings

ko.applyBindings(data,document.getElementById('selectdiv'))

ko.applyBindings accepts a second parameter that is a DOM element to use as the root.

This would let you do something like:

<div id="div1">
  <input data-bind="value: name" />  <!--here name will appears as 'Cee Aim'-->
</div>

<div id="div2">
  <input data-bind="value: name" />   <!--here name will appears as 'Krish'-->
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Cee Aim")
  };

  var viewModelB = {
     name: ko.observable("Krish")
  };

  ko.applyBindings(viewModelA, document.getElementById("div1"));
  ko.applyBindings(viewModelB, document.getElementById("div2"));
</script>

hope this helps...