2012-01-12 89 views
0

首先讓我先說這個問題,說我是相當新的Javascript。jQuery的DOM對象,並通過引用

我也明白,JavaScript對象通過引用傳遞和基元傳遞值[source]。

這就是說,這裏是我的問題(簡化的例子):我拉,它包含了很多不同的信息JSON數據,我需要把各種不同類型的信息轉化爲<ul>這是在另一個<ul>這樣的:

<ul class="car-tree"> 
    <li> 
    <label>Sports Cars</label> 
    <ul class="sport-cars"> 
     <li>Porsche</li> 
     <li>Mercedes</li> 
     <li>BMW</li> 
    </ul> 
    </li> 
    <li> 
    <label>Super Cars</label> 
    <ul class="super-cars"> 
     <li>Ferrari</li> 
     <li>Lamborghini</li> 
    </ul> 
    </li> 
    <li> 
    <!-- and so on... --> 
    </li> 
</ul> 

我獲取了上面的列表中選擇模板包含了除最內側<li>標籤的一切,我想填充它是這樣的:

var CarView = function(){ 

    var buildCarTree = function(){ 

    // Gets the JSON data from somewhere 
    var jsonData = grabJsonData(); 

    // Grab the template and convert it into a jQuery object 
    var template = $(grabCarTreeTemplate()); 

    // Adds sport car data to sports cars list 
    this.addCars(template.find('.sports-cars'), jsonData.sportsCars); 

    // Adds super car data to sports cars list 
    this.addCars(template.find('.super-cars'), jsonData.superCars); 

    // Add the car tree to some container 
    $('#container-trees').append(template); 
    } 

    var addCars = function(container, carData){ 

    for(id in carData){ 
     $('<li/>', { 
     text : carData[id].text 
     }).appendTo(container); 
    } 
    } 
}; 

var view = new CarView(); 
view.buildCarTree(); 

當你這樣做你會得到沒有添加數據的模板,但是,如果在console.log中添加語句addCars,則可以看到要添加到container參數中的數據。

我很困惑,因爲從我從源頭上理解我上面提供:

...如果你更改參數本身......這不會影響被送入項目 參數。但是,如果你改變 參數的內部,將回傳播......

,我會想通appendTo將改變jQuery對象的內部結構。這是怎麼回事?

+0

是'grabJsonData'做出一個Ajax請求?如果是這樣,你有異步問題。發佈'grabJsonData'的內容,我會告訴你如何解決。 – glortho 2012-01-12 21:22:44

+0

不,這不是問題。 JSON部分並不重要,因爲我可以在addCars中看到正確修改的列表,但是當我離開該功能時,列表不會反映這些修改。 – Steve 2012-01-12 21:24:33

回答

1

它看起來像你試圖調用私人VAR函數,就好像他們是obj的方法。更改此,並嘗試:

var CarView = function(){ 

    this.buildCarTree = function(){ 

    // Gets the JSON data from somewhere 
    var jsonData = grabJsonData(); 

    // Grab the template and convert it into a jQuery object 
    var template = $(grabCarTreeTemplate()); 

    // Adds sport car data to sports cars list 
    this.addCars(template.find('.sports-cars'), jsonData.sportsCars); 

    // Adds super car data to sports cars list 
    this.addCars(template.find('.super-cars'), jsonData.superCars); 

    // Add the car tree to some container 
    $('#container-trees').append(template); 
    } 

    this.addCars = function(container, carData){ 

    for(id in carData){ 
     $('<li/>', { 
     text : carData[id].text 
     }).appendTo(container); 
    } 
    } 
}; 

var view = new CarView(); 
view.buildCarTree(); 

編輯:請參閱本的jsfiddle的工作代碼:http://jsfiddle.net/eHrH6/

+0

正確的你!現在我覺得很可笑,因爲...男孩我想念結​​對編程! – Steve 2012-01-13 02:23:44