Mẫu thiết kế jQuery Mobile và Knockout.js, kiểu dáng không được áp dụng

Question

Ok vì vậy điều này đang bắt đầu làm tôi phát điên. Tôi đã tìm kiếm và tìm kiếm trong vài giờ, và mọi giải pháp duy nhất đều không hiệu quả với tôi. Vì vậy, có, câu hỏi này có thể là thừa, nhưng tôi không thể cho cuộc sống của tôi nhận được giải pháp để làm việc.

Tôi có một loạt các hộp kiểm được tạo bởi một mẫu jquery được databound thông qua knockout.js. Tuy nhiên, nó trở nên không bị cản trở. Afaik, nó là một cái gì đó về di động jquery không kiểu dáng trước khi loại trực tiếp render các mẫu, vì vậy nó kết thúc lên unstyled. Tôi đã thử nhiều phương pháp để không có kết quả, vì vậy tôi hy vọng một ai đó ở đây có thể thấy những gì tôi đang làm sai.

(tôi đang sử dụng jquery mobile 1.2.0, jquery 1.8.2 và loại trực tiếp 2.2.1)

Đây là kịch bản:

<script type="text/javascript">  


jQuery.support.cors = true; 

var dataFromServer = "";  
// create ViewModel with Geography, name, email, frequency and jobtype 
var ViewModel = { 
    email: ko.observable(""), 
    geographyList: ["Hovedstaden","Sjælland","Fyn + øer","Nordjylland","Midtjylland","Sønderjylland" ], 
    selectedGeographies: ko.observableArray(dataFromServer.split(",")), 
    frequencySelection: ko.observable("frequency"), 
    jobTypes: ["Kontor (administration, sekretær og reception)","Jura","HR, Ledelse, strategi og udvikling","Marketing, kommunikation og PR","Handel og service (butik, service, værtinde og piccoline)","IT","Grafik og design","Lager, chauffør, bud mv.","Økonomi, regnskab og finans","Kundeservice, telefoninterview, salg og telemarketing","Sprog","Øvrige jobtyper"], 
    selectedJobTypes: ko.observableArray(dataFromServer.split(",")), 
    workTimes: ["Fulltid","Deltid"], 
    selectedWorkTimes: ko.observableArray(dataFromServer.split(",")) 
}; 

// function for returning checkbox selection as comma separated list 
ViewModel.selectedJobTypesDelimited = ko.dependentObservable(function() { 
    return this.selectedJobTypes().join(","); 
}, ViewModel); 

var API_URL = "/webapi/api/Subscriptions/"; 

// function used for parsing json message before sent 
function omitKeys(obj, keys) { 
    var dup = {}; 
    var key; 
    for (key in obj) { 
    if (obj.hasOwnProperty(key)) { 
     if (keys.indexOf(key) === -1) { 
     dup[key] = obj[key]; 
     } 
    } 
    } 
    return dup; 
} 

//Function called for inserting new subscription record 
function subscribe() { 
    if($("#jobmailForm").valid()=== true){ 
    //window.alert("add subscriptiooncalled"); 
    var mySubscription = ko.toJS(ViewModel); 
    //var json = JSON.stringify(mySubscription); 
    var jsonSmall = JSON.stringify(omitKeys(mySubscription, ['geographyList','jobTypes','selectedJobTypesDelimited','workTimes'])); 
    //window.alert(jsonSmall); 
    $.ajax({ 
     url: API_URL, 
     cache: false, 
     type: 'POST', 
     contentType: 'application/json', 
     data: jsonSmall, 
     success: function (data) { 
      window.alert("success"); 

     }, 
     error: function (error) { 
      window.alert("ERROR STATUS: " + error.status + " STATUS TEXT: " + error.statusText); 

     } 
    }); 
    } 
} 

function initializeViewModel() { 
    // Get the post from the API  
    var self = this; //Declare observable which will be bind with UI 
    // Activates knockout.js 
    ko.applyBindings(ViewModel); 
} 

// Handle the DOM Ready (Finished Rendering the DOM) 
$("#jobmail").live("pageinit", function() { 
    initializeViewModel(); 
    $('#jobmailDiv').trigger('updatelayout'); 
}); 


</script> 
    <script id="geographyTmpl" type="text/html"> 
    <input type="checkbox" data-role="none" data-bind="attr: { value: $data }, attr: { id: $data }, checked: $root.selectedGeographies" /> 
    <label data-bind="attr: { for: $data }"><span data-bind="text: $data"></span></label> 
    </script> 
    <script id="jobTypeTmpl" type="text/html"> 
    <label><input type="checkbox" data-role="none" data-bind="attr: { value: $data }, checked: $root.selectedJobTypes" /><span data-bind="text: $data"></span></label> 
    </script> 

Note, "jobmail" là "trang xung quanh "phần tử div, không được hiển thị ở đây. Và đây là đánh dấu:

<div data-role="content"> 
<umbraco:Item field="bodyText" runat="server"></umbraco:Item> 
<form id="jobmailForm" runat="server" data-ajax="false"> 
    <div id="jobmailDiv"> 
    <p> 
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" class="required email" data-bind="'value': email" /> 
    </p> 

    <fieldset data-role="controlgroup" data-mini="true" data-bind="template: { name: 'geographyTmpl', foreach: geographyList, templateOptions: { selections: selectedGeographies } }"> 
    <input type="checkbox" id="lol" /> 
    <label for="lol">fkfkufk</label> 
    </fieldset> 
    <fieldset data-role="controlgroup" data-mini="true"> 
    <p data-bind="template: { name: 'jobTypeTmpl', foreach: jobTypes, templateOptions: { selections: selectedJobTypes } }"></p> 
    </fieldset> 

    <fieldset data-role="controlgroup" data-mini="true"> 
    <input type="radio" id="frequency5" name="frequency" value="5" data-bind="checked: frequencySelection" /><label for="frequency5">Højst 5 gange om ugen</label> 
    <input type="radio" id="frequency3" name="frequency" value="3" data-bind="checked: frequencySelection" /><label for="frequency3">Højst 3 gange om ugen</label> 
    <input type="radio" id="frequency1" name="frequency" value="1" data-bind="checked: frequencySelection" /><label for="frequency1">Højst 1 gang om ugen</label> 
    </fieldset> 

    <p> 
    <input type="button" value="Tilmeld" class="nice small radius action button" onClick="subscribe();"> 
    </p> 

    <a href="{locallink:1733}" data-role="button" data-icon="back" data-inline="true" data-direction="reverse">Tilbage</a> 
</div> 
</form> 

phương pháp thay thế của cách gọi các restyling (doesnt làm việc một trong hai):

$(document).on('pagebeforeshow', '#jobmail', function(){  
// Get the post from the API  
    var self = this; //Declare observable which will be bind with UI 
    // Activates knockout.js 
    ko.applyBindings(ViewModel); 
}); 
// Handle the DOM Ready (Finished Rendering the DOM) 
$("#jobmail").live("pageinit", function() { 
    $('#jobmail').trigger('pagecreate'); 
}); 

Answer 1

Mỗi động tạo ra nội dung jQuery Mobile phải được tăng cường bằng tay.

Nó có thể được thực hiện trong vài cách khác nhau, nhưng một trong những phổ biến nhất có thể được thực hiện thông qua jQuery Mobile chức năng .trigger(.

Ví dụ:

• Tăng cường chỉ nội dung trang

  $('#page-id').trigger('create'); 
  

• Tăng cường trang đầy đủ (tiêu đề + nội dung + footer):

  $('#page-id').trigger('pagecreate'); 
  

Nếu bạn muốn tìm hiểu thêm về chủ đề này, hãy xem một số khác của tôi là ARTICLE để minh bạch hơn. Hoặc tìm thấy nó HERE.

Answer 2

Sử dụng liên kết tùy chỉnh (Knockout) để kích hoạt jQuery Mobile thành tăng cường nội dung được tạo động bởi Knockout.

Dưới đây là một phong tục đơn giản ràng buộc:

ko.bindingHandlers.jqmEnhance = { 
    update: function (element, valueAccessor) { 
     // Get jQuery Mobile to enhance elements within this element 
     $(element).trigger("create"); 
    } 
}; 

Sử dụng ràng buộc trong HTML của bạn như thế này các tùy chỉnh, nơi myValue là một phần của mô hình quan điểm của mình rằng những thay đổi, kích hoạt các nội dung động được chèn vào DOM :

<div data-bind="jqmEnhance: myValue"> 
     <span data-bind="text: someProperty"></span> 
     <a href="#some-id" data-role="button">My Button</a> 
     <input type="radio" id="my-id" name="my-name" value="1" data-bind="checked: someOtherProperty" /><label for="my-id">My Label</label> 
    </div> 

trong trường hợp của riêng tôi, myValue là một phần của một biểu thức trong một if ràng buộc, trong đó sẽ kích hoạt nội dung được bổ sung vào DOM.

<!-- ko if: myValue --> 
    <span data-bind="jqmEnhance: myValue"> 
     <!-- My content with data-bind attributes --> 
    </span> 
    <!-- /ko -->