jquery-mobile - jQuery Mobile 和 Knockout.js 模板，未应用样式

Question

好的，所以这开始让我发疯了。我已经搜索了几个小时，但每个解决方案都不适合我。所以，是的，这个问题可能是多余的，但我一辈子都无法找到可行的解决方案。

我有一堆复选框由通过 knockout.js 进行数据绑定(bind)的 jquery 模板生成。但是，它没有样式。 Afaik，这是关于 jquery mobile 在 knockout 渲染模板之前进行样式设置的事情，所以它最终没有样式化。
我尝试了很多方法都无济于事，所以我希望这里有人能看到我做错了什么。

(我正在使用 jquery mobile 1.2.0、jquery 1.8.2 和 knockout 2.2.1)

这是脚本:

<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>

请注意，“jobmail”是围绕“page”的 div 元素，此处未显示。这是标记:

<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>

调用重新样式的替代方法(也不起作用):

$(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

使用自定义绑定(bind) (Knockout) 来触发 jQuery Mobile 以增强由 Knockout 生成的动态创建的内容。

这是一个简单的自定义绑定(bind):

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

像这样在您的 HTML 中使用自定义绑定(bind)，其中 myValue是 View 模型中发生变化的部分，会触发要插入 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>

在我自己的情况下， myValue是 if 中表达式的一部分绑定(bind)，这将触发将内容添加到 DOM。

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