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

好吧，这开始让我发疯了。我已经搜索了好几个小时了，每一个解决方案都不适合我。所以，是的，这个问题可能是多余的，但我不能为我的生活找到工作的解决方案

我有一堆复选框是由jquery模板生成的，该模板通过knockout.js进行数据绑定。但是，它没有样式。好吧，这是关于jquerymobile在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>

---

必须手动增强每个动态生成的jQuery Mobile内容

有几种方法可以实现，但最常见的方法是通过jQuery Mobile的

功能
.trigger（）

示例：


仅增强页面内容

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


增强整个页面（页眉+内容+页脚）：



如果您想了解更多有关此主题的信息，请查看我的另一个，更透明地说，它是我的个人博客。或者查找它
使用自定义绑定（Knockout）触发jQuery Mobile，以增强Knockout生成的动态创建内容

下面是一个简单的自定义绑定：

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

在HTML中像这样使用自定义绑定，其中
myValue
是视图模型中发生更改的部分，会触发要插入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>

谢谢你的回复，那篇小文章对以后的参考很有帮助。我尝试了你的建议，在我的原始帖子中我的代码有一点变化，两者都不起作用。我尝试将使文档中的敲除绑定在pagebeforeshow上，而使重新排序在pageinit上，听起来合理，但不起作用。你有没有在我的代码中何时触发的建议？应该在生成所有复选框后放置。如果在循环中执行，则触发（'create'）必须遵循循环。不要在每次循环迭代中都这样做，这会减慢页面生成。所以在所有动态内容生成后只做一次。但这就是我一直在尝试的，没有运气。我完全不知所措。你能给你的答案添加这部分代码吗？我想自己检查一下。好的，关于你的上一篇文章在“pageinit”中我呈现了淘汰内容，然后在“pagebeforeshow”事件中，我有“$”（“#jobmail”）。触发器（'pagecreate'）；”完成了任务！这是一个现在已经解决的主要障碍。非常感谢您的时间和努力：）JQMEnhanced更新何时运行？您如何知道这将在创建内部内容之后而不是之前发生？根据：每当相关的可观察到的更改时，KO将调用您的更新回调OK，因此MyValue应该是在所有其他更改触发更新之后最后一个更改的对象。如果您的内部内容很复杂（插入元素），是的，更新的顺序可能很重要。我已经更新了我的答案，使之与我的代码更加匹配，即内容被包装在
if
@TvdH-中，为了支持虚拟元素，我使用了以下代码：
ko.virtualElements.allowedBindings.jqmenhanced=true
$('#page-id').trigger('pagecreate');

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

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

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