如何操縱DOM來利用MVVM模式，我想使用Knockout的點擊綁定來實現這個片段

如何操縱DOM來利用MVVM模式，我想使用Knockout的點擊綁定來實現這個片段。我不想使用jQuery或JavaScript DOM方法。我正在幫助來自http://knockoutjs.com/documentation/click-binding.html 如何操縱DOM來利用MVVM模式，我想使用Knockout的點擊綁定來實現這個片段

var viewModel = function() { 
 
    var self = this; 
 
    var geocoder = new google.maps.Geocoder(); 
 
    document.getElementById('search-me').addEventListener('click', function() { 
 
     self.geoAddr(geocoder, map); 
 
    }); 
 
}

<input class="text-box" id="location" type="text" value="Delhi, India"> 
 
<button class="my-button" id="search-me" type="submit"> 
 
     <img class="search-img" src="image/mybutton.png" alt="search" /> 
 
</button>

來源

2016-12-30 Sameer Mishra

文檔中你發現了什麼麻煩？ – gkb

@gkb我願意DOM的數據操縱必須利用MVVM模式，但不能使用jQuery或Javascript DOM方法。我想在上面的js代碼中使用Knockout的點擊綁定http://knockoutjs.com/documentation/click-binding.html來實現此功能。 –

是否要調用'self.geoAddr（geocoder，map）;'通過敲除的'click'綁定點擊按鈕？ – gkb

不知道你是什麼之後，但像

function model() { 
 
    var self = this; 
 
    this.location = ko.observable('Delhi, India'); 
 
    this.geoAddr = function() { 
 
    var location = self.location(); 
 
    alert('my location is ' + location); 
 
    } 
 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="control-label col-sm-2" for="location">Location:</label> 
 
    <div class="col-sm-9"> 
 
    <input type="text" class="form-control" id="location" data-bind="textInput: location" /> 
 
    </div> 
 
</div> 
 
<input type="button" class="btn btn-info" value="Search" data-bind="click: geoAddr">

來源

2016-12-30 12:48:49

如何操縱DOM來利用MVVM模式，我想使用Knockout的點擊綁定來實現這個片段

回答

相關問題