0

所以我有一个html模板：

      <div style='background-color: red;'>
          <div>
                $QuestionUpButton
              <%--<img style="cursor: pointer" onclick="onAddQUestionVote" src="../../Images/arrow-up-24-ns.png" data-questionvoteupbutton="$i" id='addQuestionVote' alt='Vote up' data-questionid='$questionUid' />--%>
              <span data-questionvotegroup='$i'>$QuestionVote</span>
              <span data-questiontextgroup='$i'>$textboxText<br />
              </span>
          </div>
          <div id="mm" style='background-color: white;'>
              $AnswerUpVote
              <%--<img style="cursor: pointer" onclick="onAddAnswerVote" src="../../Images/arrow-up-24-ns.png" data-answervoteupbutton="$i" id='addAnswerVote' alt='Vote up' data-answeruid='$answerGuid' />--%>
              <img style="cursor: pointer" onclick="onRemoveAnswerVote" src="../../Images/arrow-down-24-ns.png" data-answervotedownbutton="$i" id='removeAnswerVote' alt='Vote down' data-answeruid='$answerGuid' />
              <span data-answervotegroup='$i'>$AnswerVotes</span>
              <span data-labelgroup='$i'>Answer : </span>
              <span data-answertextgroup="$i" data-questionid='$questionUid' data-answerid="$answerGuid">$AnswerSpan</span>
              <input type='button' id='editButton' data-editlinkbuttongroup="$i" value='Edit' />
              <input type='button' id='deleteButton' data-deletelinkbuttongroup="$i" value='Delete Question' />
          </div>

      </div>

在文档加载时，我运行代码替换所有 $ 变量，如下所示：

function MyFunction(result) {
    //console.log(result);
    var panel = $('#mypanel');
    var userGuid = GetUserGuid().d;
    var panel = $('#MainContent_AnsweredQuestions_mypanel');

    for (var k = 0; k < result.d.length; k++) {
        var notVotedQuestion = "<img style='cursor: pointer' onclick='onAddQUestionVote' src='../../Images/arrow-up-24-ns.png' data-questionvoteupbutton='" + i + "' id='Img1' alt='Vote up' data-questionid='" + result.d[k].Uid + "' />";
        var notVotedQuestion1 = "hulabula";
        var notVotedAnswer = "notVotedAnswer";
        var votedAnswer = "";

        console.log(result.d[k].Uid)
        var html = $("#OwnerTemplateQuestionWithoutAnswer").html().replace(/\$i/g, i)
            .replace(/\$AnswerSpan/g, result.d[k].Answers[0].Conetent)
            .replace(/\$answerGuid/g, result.d[k].Answers[0].Uid)
            .replace(/\$questionUid/g, result.d[k].Uid)
            .replace(/\$QuestionVote/g, result.d[k].QuestionVotes.length)
            .replace(/\$AnswerVotes/g, result.d[k].Answers[0].AnswerVotes.length)
            .replace(/\$textboxText/g, result.d[k].Content);

        //var html1 = $("#OwnerTemplateQuestionWithoutAnswer").html(html);

        if (didUserVote(result.d[k], userGuid) == false){
            html.html().replace("$AnswerUpVote", notVotedQuestion); 
        }

        panel.append(html);
        i++;


    }

}

我第一次更换的部分工作得很好，正是我想要的：

 var html = $("#OwnerTemplateQuestionWithoutAnswer").html().replace(/\$i/g, i)
                .replace(/\$AnswerSpan/g, result.d[k].Answers[0].Conetent)
                .replace(/\$answerGuid/g, result.d[k].Answers[0].Uid)
                .replace(/\$questionUid/g, result.d[k].Uid)
                .replace(/\$QuestionVote/g, result.d[k].QuestionVotes.length)
                .replace(/\$AnswerVotes/g, result.d[k].Answers[0].AnswerVotes.length)
                .replace(/\$textboxText/g, result.d[k].Content);

但稍后在代码中我需要以不同方式加载图像取决于某些条件

   if (didUserVote(result.d[k], userGuid) == false){
        html.html().replace("$AnswerUpVote", notVotedQuestion); 
    }

而这部分 cide 根本不起作用......关于如何解决这个问题的任何建议，或者我如何以某种方式改进替换？

4

2 回答 2

0

改变这个：

html.html().replace("$AnswerUpVote", notVotedQuestion);

对此：

var html = $("#OwnerTemplateQuestionWithoutAnswer");
html.html(html.html().replace("$AnswerUpVote", notVotedQuestion));

您的代码不起作用的原因是，首先您将新的 Html 分配给 var html；稍后，由于对象已经创建，您需要将其 Html 值设置为自身更新（替换/过滤）的 html 代码。当您调用 .html() 时，您将得到一个按值传递的字符串，而不是按引用传递的字符串，这就是为什么当您只是替换 .html() 时，您正在替换它，但您没有对结果做任何事情.

于 2012-10-06T19:56:39.870 回答
0

好吧，我不确定您是否得出了上述解决方案，但我强烈建议您使用 mustache js。

Mustache 是一种“无逻辑”的模板语法。“无逻辑”意味着它不依赖于过程语句（if、else、for 等）：Mustache 模板完全用标签定义。

所以你不需要上面很难理解的javascript逻辑来做你想做的事情。

检查Mustache.JS 和它的模板教程。

于 2012-10-17T12:43:23.260 回答